Når er Context en god tilstandsløsning og når ikke?

Question

Accepted Answer

React's **Context API** lar deg dele en verdi med et helt component-tre uten prop drilling. Det er flott for **sjelden-endrede, bredt delte** data — men det er *ikke* en fullstendig state-management-løsning og har et re-render-fall for ofte endret state. ## Når Context skinner ```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 ``` ## Fallet: hver forbruker re-rendrer ved ENHVER endring ```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 ``` Når context-verdien endres, **alle** komponenter som bruker den konteksten re-rendrer — uavhengig av om de bruker delen som endret seg. For hyppig oppdatert state forårsaker dette ytelsesproblemer. Context har ingen innebygd selektiv abonnement. ## Redusering og alternativet ```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-biblioteker (Zustand, Redux, Jotai) løser re-render-problemet med **selektive abonnementer** — komponenter abonnerer bare på skivene de bruker og re-rendrer bare når de endres: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context er ikke en 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. ``` ## Hvorfor det er viktig Å kjenne Context's styrker — og begrensninger — forhindrer to vanlige feil: prop-drilling av ting som burde være i Context, og å legge høy-frekvens-state i Context (som forårsaker app-wide re-renders). Regelen: Context for **sjelden-endrede, bredt delte** verdier (theme, user, locale); et dedikert lager med selektive abonnementer for **ofte-endrede eller store** delte state. Å forstå at Context distribuerer state men ikke administrerer den, gjør det klart når det er nok og når du trenger mer.