Kdaj je Context dobra rešitev za stanje in kdaj ne?

Question

Accepted Answer

React-ov **Context API** vam omogoča deljenje vrednosti z celim poddrvetom komponent brez prop drilling. Odličen je za **redko spreminjajoče se, široko deljene** podatke — vendar ni полne rešitve za upravljanje stanja in ima pasti pri ponovnih renderiranju za pogosto spreminjajoče se stanje. ## Ko Context sija ```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 ``` ## Past: vsak potrošnik se ponovno renderira ob VSAKI spremembi ```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 ``` Ko se vrednost konteksta spremeni, se **vse** komponente, ki to kontekst potrošijo, ponovno renderirajo — ne glede na to, ali uporabljajo del, ki se je spremenil. Za pogosto posodobljeno stanje to povzroča težave z zmogljivostjo. Context nima vgrajenega selektivnega naročanja. ## Ublažitve in alternativa ```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 ``` Knjižnice stanja (Zustand, Redux, Jotai) rešijo problem ponovnega renderiranja s **selektivnimi naročili** — komponente se naročijo samo na rezine, ki jih uporabljajo, in se ponovno renderirajo le, ko se te spremenijo: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context ni upravitelj stanja ```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. ``` ## Zakaj je to pomembno Znanje o Context-ovi idealni uporabi — in njegovih omejitvah — preprečuje dve pogosti napaki: prop-drilling stvari, ki bi morale biti v Context, in postavljanje pogosto spreminjajočega se stanja v Context (kar povzroči ponovno renderiranje celotne aplikacije). Pravilo: Context za **redko spreminjajoče se, široko deljene** vrednosti (tema, uporabnik, jezyk); namenski store s selektivnimi naročili za **pogosto spreminjajoče se ali velike** deljeno stanje. Razumevanje, da Context distribuira stanje, vendar ga ne upravlja, pojasni, kdaj je dovolj in kdaj potrebujete več.