Context Re-renders Fix

Diagnose and fix React Context re-renders through context splitting, memoization, or store extraction.

Why Context Causes Re-renders

Every component that calls useContext(MyContext) re-renders whenever the context value changes — even if the component only uses one field from a large object. This is the most common Context performance pitfall.

// ❌ Any change to user, theme, OR cart re-renders ALL consumers
const AppContext = createContext({ user, theme, cart, notifications });

Step 1: Diagnose