Kada je Context dobar za rješenje stanja a kada nije?

Question

Accepted Answer

React's **Context API** vam omogućava da dijelite vrijednost s cijelim podstablom komponenti bez prop drilinga. Odličan je za **rijetko mijenjajuće, široko dijeljene** podatke — ali nije potpuno rješenje za upravljanje stanjem i ima zamku ponovno renderiranja za često mijenjajuće stanje. ## Kada Context sjaji ```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 ``` ## Zamka: svaki potrošač se ponovno renderira na BILO KOJU promjenu ```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 ``` Kada se vrijednost konteksta promijeni, **sve** komponente koje konzumiraju taj kontekst se ponovno renderiraju — bez obzira trebaju li dio koji se promijenio. Za često ažurirajuće stanje, to uzrokuje probleme s performansama. Context nema ugrađenu selektivnu pretplatu. ## Ublažavanja i 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 ``` Biblioteke za stanje (Zustand, Redux, Jotai) rješavaju problem ponovno renderiranja sa **selektivnim pretplatama** — komponente se pretplaćuju samo na dijelove koje koriste i ponovno se renderiraju samo kada se ti dijelovi promijene: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context nije upravitelj stanjem ```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. ``` ## Zašto je to važno Znanje o Context-ovoj točki jačine — i njegovim ograničenjima — sprječava dvije česte greške: prop-drilling stvari koje trebaju biti u Context-u, i stavljanje često mijenjajućeg stanja u Context (što uzrokuje ponovno renderiranje u cijeloj aplikaciji). Pravilo: Context za **rijetko mijenjajuće, široko dijeljene** vrijednosti (tema, korisnik, jezična lokalizacija); dedicirani store sa selektivnim pretplatama za **često mijenjajuće ili velike** dijeljene podatke. Razumijevanje da Context distribuira stanje ali ga ne upravlja pojašnjava kada je dovoljan a kada trebate više.