Când este Context o soluție de stare bună și când nu?

Question

Accepted Answer

**Context API** al React vă permite să partajați o valoare cu întregul subarbore de componente fără prop drilling. Este excelent pentru date **rare, pe scară largă** — dar nu este o soluție completă de *management de stare* și are o capcană de re-render pentru starea care se schimbă frecvent. ## Când Context strălucește ```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 ``` ## Capcana: fiecare consumator se re-redă la ORICE schimbare ```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 ``` Când valoarea contextului se schimbă, **toate** componentele care consumă acel context se re-redă — indiferent dacă folosesc partea care s-a schimbat. Pentru starea actualizată frecvent, aceasta provoacă probleme de performanță. Context nu are o subscriere selectivă încorporată. ## Atenuări și alternativă ```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 ``` Bibliotecile de stare (Zustand, Redux, Jotai) rezolvă problema re-redării cu **abonări selective** — componentele se abonează doar la feliile pe care le folosesc și se re-redă doar atunci când acelea se schimbă: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context nu este un manager de stare ```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. ``` ## De ce este important Cunoașterea punctelor forte ale Context — și limitele acestuia — previne două greșeli comune: prop-drilling a lucrurilor care ar trebui să fie în Context și punerea stării de frecvență ridicată în Context (determinând re-redări pe întreaga aplicație). Regula: Context pentru **valori rar schimbate, pe scară largă** (temă, utilizator, localitate); un store dedicat cu abonări selective pentru starea **frecvent schimbată sau mare** partajată. Înțelegerea că Context distribuie starea dar nu o gestionează clarifică când este suficient și când ai nevoie de mai mult.