Profiling React rendering performance
summary
A live profiling session of the Pirates list web app uses Chrome Performance Tab and the React DevTools Profiler to show actual costs: renders that start around ~250ms drop to ~50ms after fixing referential-equality bugs with useCallback/useMemo and react memo, and replacing full rendering with react-window virtualization. The demo measures frame rates (50–60fps), isolates expensive lines with performance.mark/measure, and proves the rebuilt app feels snappy on throttled devices — the optimizations work and are quantifiable.
AI-written summary · about
chapters (6)
- 0:00Start
- 0:19Performance
- 5:00Discover bottlenecks
- 29:48But is React doing enough?
- 31:01Premature optimisation blah blah
- 32:01Concurrent Mode
related talks
27mProfiling and Optimizing Performance of React Applications
16mReact Component Profiling
37mPsychology of Rerenders
16mDeep dive into react profiles and performance optimisation
38mLive Coding - Optimizing a React application
20mPerformance Anxiety with React: Track and increase speed of your apps
11mMaximizing React Perfomance with DevTools: Profiler and Components
28mDemystifying React Performance