React is Killing your Performance and it's Your Fault
summary
Claim: React’s runtime work can cause visible lag and it’s usually caused by unnecessary renders. The talk explains the reconciliation loop and Virtual DOM, shows a lag meter demo comparing Dev vs production builds and dozens of dots updated while dragging, and gives concrete fixes: use react.memo, lift state down, use children props, or use refs for imperative drawing. For large rapid updates the talk demonstrates React 18 scheduling hooks like useDeferredValue / startTransition and shows measurable improvement.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 2:03React harms performance
- 9:52React reconciliation
- 12:40Avoiding Death by a Thousand Cuts
- 15:07Stopping unnecessary renders
- 19:22Component separation
- 20:04Breaking React’s loop
- 22:34When React is too slow
- 23:18Reconciliation vs reactive programming
- 26:10React Fiber scheduling
- 28:12React 18 updates
- 32:27Summary
- 32:49Q&A
related talks
27mProfiling and Optimizing Performance of React Applications
28mDemystifying React Performance
20mPerformance Anxiety with React: Track and increase speed of your apps
53mHelp! My React app is slowwwww!
51mReact & Redux: Optimizing performance
26mReact: Lifting state up is killing your app
37mPsychology of Rerenders
38mLive Coding - Optimizing a React application