Unlocking the Mystery of React's Re-Rendering
summary
Builds a small dark‑mode app with a logo, toggle button and footer and uses React Profiler to show the logo and footer flash on each state change. Demonstrates wrapping pure components in React.memo and stabilizing handlers with useCallback and expensive computations with useMemo so memoized children stop re-rendering. Tests on throttled networks and low‑end devices, profiles production, and warns that a 99 Lighthouse score does not guarantee real user performance.
AI-written summary · about
chapters (13)
- 0:00Introduction to performance
- 1:20Speaker background and talk
- 2:13Why performance matters
- 3:48Understanding re-rendering
- 5:45Re-rendering pitfalls
- 7:26Profiling application
- 8:58Optimizing with memo
- 10:36Hooks for optimization
- 13:01Developer career program
- 14:29Testing and best practices
- 16:05When to optimize
- 17:13Complex component strategy
- 19:44Beyond lighthouse scores
related talks
19mThe Mystery of React Renders
16mDeep dive into react profiles and performance optimisation
27mProfiling and Optimizing Performance of React Applications
11mMaximizing React Perfomance with DevTools: Profiler and Components
21mMaking Your React Apps Perform At Scale
37mPsychology of Rerenders
20mPerformance Anxiety with React: Track and increase speed of your apps
28mDemystifying React Performance