Kada Context yra geras būsenos sprendimas ir kada ne?

Question

Accepted Answer

React **Context API** leidžia dalytis reikšme su visu komponentų pomedžiu be props grąžinimo. Tai puiku **mažai keičiamiems, plačiai bendrintiems** duomenims — tačiau tai nėra pilnas būsenos valdymo sprendimas ir turi probleminį kodo atsiradimą, kai dažnai keičiama būsena. ## Kada Context žvi ```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 ``` ## Spąstai: kiekvienas vartotojas iš naujo renderuojamas BET kuomet nors pasikeitimas ```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 ``` Kai context reikšmė pasikeičia, **visi** komponentai, kurie vartoja šį kontekstą, iš naujo renderuojami — neatsižvelgiant į tai, ar jie naudoja dalį, kuri pasikeitė. Dažnai keičiamai būsenai, tai sukelia našumo problemas. Context neturi integruoto selektyvaus prenumeravimo. ## Švelninimas ir alternatyva ```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 ``` Būsenos bibliotekos (Zustand, Redux, Jotai) išsprendžia iš naujo renderavimo problemą su **selektyviu prenumeravimu** — komponentai prenumeruojasi tik toms dalims, kurias naudoja, ir iš naujo renderuojami tik kai tos pasikeičia: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context nėra būsenos vadybininkas ```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. ``` ## Kodėl tai svarbu Öinant Context greitą tašką — ir jo apribojimus — išvengiama dviejų bendrų klaidų: props grąžinimo dalykų, kurie turėtų būti Context, ir dažnai keičiamos būsenos dėjimo į Context (sukelia visą programą iš naujo renderuojančius modelius). Taisyklė: Context **retai besikeičiančioms, plačiai bendrintiems** reikšmėms (tema, vartotojas, lokalė); dedikuota saugykla su selektyviu prenumeravimu **dažnai keičiamai ar didelei** bendrinlajai būsenai. Supratimas, kad Context paskirstą būseną, tačiau jos netvarkų, paaiškina, kada jos pakanka ir kada jums reikia daugiau.