Milloin Context on hyvä state-ratkaisu ja milloin ei?

Question

Accepted Answer

Reactin **Context API** antaa sinun jakaa arvon koko komponenttipuussa ilman prop drillausta. Se on loistava **matalafrekvenssi, laajalti jaettujen** tietojen kannalta — mutta se *ei* ole täydellinen state-management-ratkaisu ja sillä on uudelleenrenderöinnin ongelma usein muuttuvalle statelle. ## Milloin Context loistaa ```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 ``` ## Ongelma: jokainen kuluttaja uudelleenrenderöidään MISSÄ TAHANSA muutoksessa ```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 ``` Kun kontekstin arvo muuttuu, **kaikki** tämän kontekstin kuluttavat komponentit uudelleenrenderöidään — riippumatta siitä, käyttävätkö ne osaa, joka muuttui. Usein päivittyvälle statelle tämä aiheuttaa suorituskykyongelmia. Contextilla ei ole sisäänrakennettua valikoivaa tilausta. ## Lievennykset ja vaihtoehto ```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 ``` State-kirjastot (Zustand, Redux, Jotai) ratkaisevat uudelleenrenderöinnin ongelman **valikoiduilla tilauksilla** — komponentit tilaavat vain niiden käyttämät slicet ja uudelleenrenderöidään vain kun nämä muuttuvat: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context ei ole 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. ``` ## Miksi se on tärkeää Contextin vahvuusalueen tuntemus — ja sen rajoitukset — estää kahta yleistä virhettä: sellaisten asioiden prop drillausta, joiden pitäisi olla Contextissa, ja korkeataajuisen staten laittamista Contextiin (mikä aiheuttaa sovelluksen laajuisen uudelleenrenderöinnin). Sääntö: Context **haroin muuttuvien, laajalti jaettujen** arvojen kannalta (theme, user, locale); erillinen store valikoiduilla tilauksilla **usein muuttuvalle tai suurelle** jaettulle statelle. Ymmärryksen, että Context jakaa staten mutta ei hallitse sitä, selventää milloin se on riittävä ja milloin tarvitset enemmän.