Performance
2 lessonsAbout 12 minutesAdvanced
This part of the React Tutorial runs from Memoisation in React through to Avoiding Unnecessary Renders. There are 2 lessons here, and working through them takes about 12 minutes at a steady pace.
It follows on from Context, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1Memoisation in ReactReact.memo, useMemo and useCallback explained. Learn what each one actually prevents, why they are usually unnecessary, and how to measure first.
- 2Avoiding Unnecessary RendersReduce React re-renders by moving state down, passing children through, and splitting components — usually better than reaching for memo.