The Mystery of React Renders
summary
React profiling shows an expensive component = 1000ms during repeated parent renders; moving state down removes the heavy rerender, and passing the heavy subtree as a prop/children avoids remounts. Wrapping components in React.memo + memoize non-primitive props prevents unnecessary renders but requires useCallback/useMemo for functions and object props, and avoids overuse because they add work. Keys must be stable: never use Math.random, index only for static lists, prefer unique IDs for sortable lists.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 1:08What is rendering
- 2:45When does a component render
- 9:10Use Memo vs Use Call Back
- 10:16When to use Use Memo vs Use Call Back
- 11:45Use Memo in Dependency List
- 13:37Use Memo and UseCallback
- 14:12Lists
related talks
51mReact & Redux: Optimizing performance
27mProfiling and Optimizing Performance of React Applications
30mAre we React-ing wrongly?
38mWe are React-ing Wrongly
37mPsychology of Rerenders
40mProfiling React rendering performance
21mUnlocking the Mystery of React's Re-Rendering
28mDemystifying React Performance