Mikor jó a Context egy state megoldásként és mikor nem?

Question

Accepted Answer

A React **Context API** lehetővé teszi, hogy egy értéket egy teljes komponensfa-részvel megoszthass prop drilling nélkül. Nagyszerű a **alacsony frekvenciájú, széles körben megosztott** adatokhoz — de ez *nem* teljes értékű state-management megoldás, és vannak re-render buktatói a gyakran változó state-hez. ## Amikor a Context ragyog ```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 ``` ## A bukta: minden fogyasztó újrarenderelődik BÁRMILYEN változáson ```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 ``` Mikor a context érték megváltozik, az **összes** komponens, amely ezt a contextet fogyasztja, újrarenderelődik — függetlenül attól, hogy használják-e a megváltozott részt. Gyakran frissülő state esetén ez teljesítményi problémákat okoz. A Context-nek nincs beépített szelektív feliratkozás. ## Enyhítések és az alternatíva ```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 ``` A state library-k (Zustand, Redux, Jotai) megoldják az újrarenderelés problémáját a **szelektív feliratkozásokkal** — a komponensek csak azokra a szeletekre iratkoznak fel, amelyeket használnak, és csak akkor renderelődnek újra, amikor azok megváltoznak: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## A Context nem 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. ``` ## Miért is számít ez Annak ismerete, hogy a Context hol erős — és ahol gyenge — megelőzi a két gyakori hibát: olyan dolgok prop-drillingelése, amelyek Context-ben kellene lenni, és nagy frekvenciájú state Context-be helyezése (ami alkalmazás-szintű újrarendereléseket okoz). A szabály: Context a **ritkán változó, széles körben megosztott** értékekhez (téma, felhasználó, nyelv); egy dedikált store szelektív feliratkozásokkal a **gyakran változó vagy nagy** megosztott state-hez. Annak megértése, hogy a Context csak elosztja a state-et, de nem kezeli azt, egyértelművé teszi, hogy mikor elegendő, és mikor kell több.