Reconciliation: The Root of Performant Applications
summary
Implements Conway’s Game of Life in React as a 100×100 grid and measures real performance: the naive version creates 10,000 DOM nodes and renders at about 160 ms → 24–30 ms after fixes. Uses production React build (about 4× faster), finds the debugger kills throughput, and shows a tiny change — a breaker component invalidating a subtree — forces full DOM rebuilds. Adds componentShouldUpdate and keys to only re-render changed cells.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 0:32Conways Game of Life
- 1:28Worst Application
- 2:21Performance Recommendations
- 2:45Performance Improvements
- 4:09Performance Testing
- 5:07React without JSX
- 5:31React Create Component
- 6:06JSX App
- 6:42CreateElement
- 7:16Tree of Objects
- 7:32Component Lifecycle
- 9:00Reconciliation
- 9:58Reconciliation Example
- 12:02Slow Application
- 12:42breaker component
- 13:45fast vs slow version
- 15:03children
- 15:23optoma
- 15:35Game of Life
- 18:40Final Thought
related talks
38mLive Coding - Optimizing a React application
55mUnderstanding Performance of React Applications
51mReact.js Reconciliation
26mReact: Lifting state up is killing your app
36mReact is Killing your Performance and it's Your Fault
10mAn Overview of React's Reconciliation Algorithm
51mTips and tricks for optimizing your React application
27mProfiling and Optimizing Performance of React Applications