Context can cause unnecessary re-renders if not used carefully. Here's how to optimize it.
The Problem#
Loading code block...
Split Contexts#
Loading code block...
Separate State and Dispatch#
Loading code block...
Memoize Provider Value#
Loading code block...
Selector Pattern#
Loading code block...
Compound Components#
Loading code block...
Preventing Child Re-renders#
Loading code block...
Context with Immer#
Loading code block...
Testing Context#
Loading code block...
Best Practices#
Structure:
✓ Split contexts by update frequency
✓ Separate state and dispatch
✓ Keep contexts focused
✓ Use custom hooks for access
Performance:
✓ Memoize provider values
✓ Use selectors for granular access
✓ Prevent unnecessary re-renders
✓ Profile with React DevTools
Patterns:
✓ Create context factories
✓ Use compound components
✓ Provide meaningful defaults
✓ Handle missing providers
Organization:
✓ Co-locate context with components
✓ Export hooks, not contexts
✓ Document context shape
✓ Test providers separately
Conclusion#
Context optimization prevents unnecessary re-renders. Split contexts by concern, separate state from dispatch, memoize values, and use selectors for granular access. Profile with React DevTools to identify performance issues and apply these patterns strategically.