React: Lifting state up is killing your app
summary
Claim: lifting state to the parent causes React to re-traverse and compare props for every cell, producing a multi-hundred-millisecond cost even when one cell updates. The demo builds a clickable data grid, profiles with React DevTools, throttles CPU, and shows a 150×150 grid (≈ 22,500 cells) where prop comparisons dominate. Refactor moves state down into a Field class, adds a useForcedRender hook, subscribes/unsubscribes per cell, and yields a single-cell re-render improvement in the profiler.
AI-written summary · about
chapters (8)
- 0:00Start
- 2:03Source and the Historical Context
- 2:45Management Center
- 5:31The Code
- 7:24Performance Problems
- 11:16Set Cell Function
- 21:05Use Forced Render
- 24:28Unsubscribing from Cell Updates
related talks
38mLive Coding - Optimizing a React application
20mReconciliation: The Root of Performant Applications
36mReact is Killing your Performance and it's Your Fault
08mReact Without DevTools
06mAG Grid's New React Rendering Engine
21mMaking Your React Apps Perform At Scale
01h 04mWhat makes React different?
55mUnderstanding Performance of React Applications