To render or Not to render
summary
Explains the two meanings of "render" — the React render phase that builds a tree of React elements and the DOM commit phase that paints the page — and shows how React 16's Fiber reconciliation turns renders into interruptible, pausable work using a linked-list of fibers and requestIdleCallback. Builds a small wishlist app, measures renders with the Profiler, debugs a 2s re-render caused by a heavy loop, and reduces churn with React.memo, useMemo/useCallback and hoisted constants.
AI-written summary · about
chapters (19)
- 0:00Introduction and motivation
- 2:46Why mastering React tools matters
- 4:58From user interaction to rendering
- 7:52Two meanings of render in React
- 9:18Virtual DOM and reconciliation phases
- 11:29Fiber reconciliation explained
- 13:44How React processes components
- 17:53Fiber node connections and priorities
- 20:43Commit phase and effects
- 21:49Performance optimization basics
- 22:30React.memo and PureComponent
- 25:48Profiling with React DevTools
- 26:52useMemo for expensive calculations
- 29:43useCallback to avoid re-renders
- 34:30useRef for stable references
- 37:22Premature optimization pitfalls
- 38:06Tools for performance debugging
- 38:29Summary and closing remarks
- 39:19Q&A session
related talks
05mReact Everything, Render Everywhere
24mReact Fiber Internals: Reconciliation, Scheduling, and Concurrent Rendering
37mPsychology of Rerenders
45mWhat's Next for React
19mKeynote Part 3: React Performance End to End (React Fiber)
31mUnderstanding Rendering Patterns
31mA Cartoon Intro to React Fiber
32mLayperson's guide to React Fiber