Hvornår er Context en god state-løsning, og hvornår ikke?

Question

Accepted Answer

Reacts **Context API** lader dig dele en værdi med et helt component-undertræ uden prop drilling. Det er fantastisk til **lavfrekvent, bredt delt** data — men det er *ikke* en fuldstændig state-management-løsning og har et re-render-problem for hyppigt skiftende state. ## Hvornå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 ``` ## Problemet: hver consumer re-renderes ved ENHVER ændring ```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-værdien ændres, re-renderes **alle** komponenter, der forbruger denne context — uanset om de bruger den del, der ændrede sig. For hyppigt opdateret state forårsager dette ydelsesproblemer. Context har ingen indbygget selektiv abonnement. ## Afhjælpninger 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 libraries (Zustand, Redux, Jotai) løser re-render-problemet med **selektive abonnementer** — komponenter abonnerer kun på de slices, de bruger, og re-renderes kun når disse ændres: ```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 betyder noget At kende Contexts styrke — og dets begrænsninger — forhindrer to almindelige fejl: prop-drilling ting, der bør være i Context, og at putte hyppigt skiftende state i Context (hvilket forårsager app-dækkende re-renders). Reglen: Context til **sjældent skiftende, bredt delt** værdier (theme, user, locale); en dedikeret store med selektive abonnementer til **hyppigt skiftende eller stor** delt state. At forstå, at Context distribuerer state, men ikke administrerer det, præciserer hvornår det er nok, og hvornår du har brug for mere.