const ThemeContext = createContext("light");
function App() {
const [theme, setTheme] = useState("dark");
return <ThemeContext value={theme}><Page /></ThemeContext>;
}
function Button() {
const theme = useContext(ThemeContext);
return <button className={theme}>Ок</button>;
}Что важно знать
- Подходит для редко меняющихся данных, нужных многим: тема, язык, текущий пользователь.
- При изменении значения перерисовываются все компоненты, читающие контекст. Объект-значение, созданный заново на каждом рендере, перерисует их всегда — оборачивать в
useMemoили разделять контексты. - Часто проблему проброса props лучше решает композиция через
children. - Для часто меняющегося общего состояния — Zustand, Redux Toolkit или библиотеки серверного состояния.