Context with React 19
summary
React 19 removes the dot.Provider syntax, adds a new use API for consuming promises and conditional context reads, and relies on the React compiler to optimize renders so consuming context inside a tiny component and then passing plain props prevents unrelated children from rerendering. Context still forces all consumers to rerender when the provided value is recreated, so split contexts and wrap values to avoid churn. Measured costs: simple render ~0.01 ms (worst 0.1 ms), DOM update ~6 ms, frame budget 16.7 ms, and the pattern makes buttons stop rerendering as intended thanks to compiler auto-memoizes.
AI-written summary · about
chapters (9)
- 0:00Introduction to context
- 1:45What is context in React
- 3:11Rendering behavior of React
- 4:57Context rerendering issues
- 6:24State management alternatives
- 7:50Are rerenders really bad?
- 10:20Context in React 19
- 11:22React compiler and context
- 12:03Closing and developer joke
related talks
06mContext in React
20mLet's Build React Context From Scratch in JS
22mPowering Code Reuse with Context and Render Props
27mLet's Build React Context From Scratch in JS
13mEnhancing React Performance: Mastering Re-render Optimization
24mPowering Code Reuse with Context and Render Props
17mLearn how to use the React Context API
28mReact Context - Lessons Learned