Chapter 6: Context API & State Management
Context API is React's native solution for dependency injection and global state distribution. However, its implementation within the Fiber engine can lead to performance degradation if not managed correctly. This chapter explores the Context Propagation Algorithm and the strategies required to avoid unnecessary re-render cycles.
I. The Context Reconciliation Pitfall & Fiber Tracking
When a value in a Provider changes, every component that calls useContext for that context will re-render. This happens because React's Context Propagation Algorithm marks consumer components as "dirty," bypassing any React.memo or shouldComponentUpdate logic. Internally, each Fiber node maintains a dependencies property—a linked list of context objects it currently consumes.
1. Context Value Equality
React uses Object.is (shallow equality) to compare the old and new context values. If you provide a new object literal value={{...}} every render, the bailout will always fail for every consumer, triggering a "Rendering Storm" across the tree.
II. Production Anti-Patterns
- Monolithic Context: Using a single context for all global variables (User, Theme, Settings). A change in the "Theme" causes components only accessing "User" to re-render.
- Inline Provider Values: Passing a newly created object as the
valueprop, bypassing all internal optimization. - Context as a Data Bus: Using Context for high-frequency updates like scroll position or cursor tracking. Context is not optimized for high-frequency state.
III. Performance Bottlenecks
- Consumer Explosion: Over-using
useContextin deeply nested trees, leading to propagated render storms. - Deep Tree Reconciliation: A context change triggering re-renders in components with complex Virtual DOM trees, saturating the Fiber scheduler's time slices.