Kdy je Context dobré řešení stavu a kdy ne?

Question

IT Interview Practice · Accepted Answer

React **Context API** vám umožňuje sdílet hodnotu s celou podstromem komponent bez prop drilling. Je skvělý pro **nízkofrekvenci, široko sdílená** data — ale není to *úplné* řešení state-managementu a má problém se znovuvykreslováním pro často se měnící stav. ## Kdy Context září ```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 ``` ## Problém: každý konzument se znovu vykresluje při JAKÉKOLIV změně ```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 ``` Když se změní kontextová hodnota, **všechny** komponenty konzumující tento kontext se znovu vykreslují — bez ohledu na to, zda používají část, která se změnila. U často se měnícího stavu to způsobuje problémy s výkonem. Context nemá vestavěné selektivní odběry. ## Zmírnění a 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 ``` Knižnice státu (Zustand, Redux, Jotai) řeší problém znovuvykreslování s **selektivními odběry** — komponenty se odebírají pouze na kousky, které používají, a znovuvykreslují se pouze když se tyto kousky změní: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context není správce stavu ```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. ``` ## Proč na tom záleží Znalost silné stránky Context — a jejích omezení — zabraňuje dvěma běžným chybám: prop-drillovací věci, které by měly být v Context, a umístění vysoce frekventovaného stavu v Context (což způsobuje znovuvykreslování v celé aplikaci). Pravidlo: Context pro **zřídka se měnící, široko sdílené** hodnoty (theme, user, locale); vyhrazené úložiště s selektivními odběry pro **často se měnící nebo velký** sdílený stav. Pochopení, že Context distribuuje stav, ale nespravuje jej, objaňuje, kdy je dostatečný a kdy potřebujete něco víc.

Kdy Context září

Problém: každý konzument se znovu vykresluje při JAKÉKOLIV změně

Zmírnění a alternativa

Context není správce stavu

Proč na tom záleží

Související otázky