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.