När är Context en bra tillståndsslösning och när är det inte?

Question

Accepted Answer

React **Context API** låter dig dela ett värde med ett helt komponentunderträd utan prop drilling. Det är bra för **lågt-frekventa, allmänt delade** data — men det är *inte* en fullständig state-management-lösning och har en re-render-fallgrop för ofta förändrligt tillstånd. ## När Context glänser ```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 ``` ## Fallgopen: varje konsument re-renderas vid NÅGON ä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ärdet ändras, **alla** komponenter som konsumerar denna context re-renderas — oavsett om de använder delen som ändrades. För ofta uppdaterat tillstånd orsakar detta prestandaproblem. Context har ingen inbyggd selektiv prenumeration. ## Mildringar och 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 ``` Tillståndsbibliotek (Zustand, Redux, Jotai) löser re-render-problemet med **selektiva prenumerationer** — komponenter prenumererar bara på de delar de använder och re-renderas bara när dessa ändras: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context är ingen 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. ``` ## Varför det är viktigt Att veta Context:s söta punkt — och dess begränsningar — förhindrar två vanliga misstag: prop-drilling av saker som borde vara i Context, och att placera högt-frekventa tillståndet i Context (orsakar app-wide re-renders). Regeln: Context för **sällan-förändrande, allmänt delade** värden (tema, användare, lokal); ett dedikerat arkiv med selektiva prenumerationer för **ofta-förändrande eller stora** delade tillstånd. Attförstå att Context distribuerar tillstånd men inte hanterar det klargör när det är tillräckligt och när du behöver mer.