Wanneer is Context een goede state-oplossing en wanneer niet?

Question

Accepted Answer

React's **Context API** laat je een waarde delen met een hele component subtree zonder prop drilling. Het is geweldig voor **laag-frequent, wijd gedeelde** gegevens — maar het is *geen* volledige state-management oplossing en heeft een re-render valkuil voor veelvuldig veranderde state. ## Wanneer Context glanst ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## De valkuil: elke consumer re-rendetrt bij ELKE verandering ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` Wanneer de context waarde verandert, **alle** componenten die die context gebruiken re-renderen — ongeacht of ze het deel gebruiken dat is veranderd. Voor frequent-vernieuwde state veroorzaakt dit prestatieproblemen. Context heeft geen ingebouwde selectieve abonnement. ## Mitigaties en het alternatief ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` State libraries (Zustand, Redux, Jotai) lossen het re-render probleem op met **selectieve abonnementen** — componenten abonneren zich alleen op de slices die ze gebruiken en re-renderen alleen wanneer die veranderen: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context is geen state manager ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## Waarom het belangrijk is Het kennen van Context's sterke punten — en beperkingen — voorkomt twee veelgemaakte fouten: prop-drilling van dingen die in Context zouden moeten staan, en het plaatsen van high-frequency state in Context (waardoor app-wide re-renders ontstaan). De regel: Context voor **zelden-veranderde, wijd gedeelde** waarden (theme, user, locale); een speciale store met selectieve abonnementen voor **frequent-veranderde of grote** gedeelde state. Het begrijpen dat Context state distribueert maar niet beheert verduidelijkt wanneer het genoeg is en wanneer je meer nodig hebt.