Когда Context — хорошее решение для состояния, а когда — нет?

Question

Accepted Answer

**Context API** React позволяет передавать значение всему поддереву компонентов без prop drilling. Это отлично подходит для **редко изменяющихся, широко общих** данных — но это *не* полное решение для управления состоянием, и есть подвох с повторным рендерингом для часто меняющегося состояния. ## Когда Context сияет ```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 ``` ## Подвох: каждый потребитель перерисовывается при ЛЮБОМ изменении ```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 ``` Когда значение контекста меняется, **все** компоненты, использующие этот контекст, перерисовываются — независимо от того, используют ли они изменённую часть. Для часто обновляемого состояния это вызывает проблемы производительности. У Context нет встроенной селективной подписки. ## Смягчение и альтернатива ```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 ``` Библиотеки состояния (Zustand, Redux, Jotai) решают проблему перерисовки с помощью **селективных подписок** — компоненты подписываются только на нужные им срезы и перерисовываются только при их изменении: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context — это не менеджер состояния ```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. ``` ## Почему это важно Знание сильных сторон Context — и его ограничений — предотвращает две распространённые ошибки: prop drilling для вещей, которые должны быть в Context, и размещение часто меняющегося состояния в Context (вызывающего перерисовку всего приложения). Правило: Context для **редко меняющихся, широко общих** значений (тема, пользователь, локаль); специализированное хранилище с селективными подписками для **часто меняющегося или большого** общего состояния. Понимание того, что Context распределяет состояние, но не управляет им, уточняет, когда его достаточно и когда нужно больше.