Live Coding - Optimizing a React application
summary
A 100 by 100 grid shows a noticeable click delay and Chrome Performance plus React Profiler expose a 172 ms re-render for a single click and reconciliation blows to ~250 ms when CPU throttled. Iterative fixes use stable callbacks and memoization so useCallback and memo stop per-cell renders and extracting memoized rows reduces comparisons from ~10,000 to ~100 and yields a big speedup. For very large datasets the video recommends react-window virtualization as the next step.
AI-written summary · about
chapters (7)
- 0:00Start
- 26:09Profiling
- 27:23Naive Grid
- 28:50Virtual Rendering
- 31:27Is Optimizing React Difficult
- 32:07Is Optimize and React Difficult
- 33:14Callback Pattern
related talks
55mUnderstanding Performance of React Applications
17mReact Responsively, Render Responsibly
20mReconciliation: The Root of Performant Applications
40mProfiling React rendering performance
34mOptimizing Performance in Large-Scale React & Node.js Applications
27mProfiling and Optimizing Performance of React Applications
26mReact: Lifting state up is killing your app
53mHelp! My React app is slowwwww!