Context позволяет поделиться значением со всем поддеревом без передачи props через каждый уровень (prop drilling). Вы создаёте context, оборачиваете поддерево его Provider, и любой потомок читает его с помощью useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
ПоддержатьДанные низкой частоты, "глобальные-ish", нужные многим компонентам: тема, текущий пользователь, locale, feature flags.
Когда value Provider изменяется, каждый компонент, потребляющий context, перерендеривается — нет способа подписаться только на часть. Два практических следствия:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
Для часто меняющегося или большого состояния разделите context на меньшие части или используйте store (Zustand/Redux), поддерживающий выборочные подписки. Context — инструмент dependency-injection, не полноценный менеджер состояния.