Context causes re-renders for all consumers on any change. Here's how to optimize with selectors.
The Problem#
Loading code block...
Solution 1: Split Contexts#
Loading code block...
Solution 2: Selector Hook with useSyncExternalStore#
Loading code block...
Solution 3: Context with Ref and Subscription#
Loading code block...
Solution 4: Memoized Context Value#
Loading code block...
Solution 5: Higher-Order Component Selector#
Loading code block...
Zustand-Style Implementation#
Loading code block...
Performance Comparison#
Loading code block...
Best Practices#
Strategies:
✓ Split contexts by update frequency
✓ Use selectors for granular subscriptions
✓ Memoize context values
✓ Consider external state libraries
Performance:
✓ Keep selectors simple
✓ Return primitive values when possible
✓ Use shallow comparison
✓ Avoid creating objects in selectors
Libraries:
✓ Zustand for simple state
✓ Jotai for atomic state
✓ use-context-selector for existing contexts
✓ React Query for server state
Conclusion#
Context selectors prevent unnecessary re-renders by subscribing to specific state slices. Split contexts for different domains, use useSyncExternalStore for selector patterns, or adopt libraries like Zustand. The right approach depends on your app's complexity and update patterns.