Какие данные стоит хранить в React Context?

React Context — это механизм, который позволяет передавать данные вниз по дереву компонентов без явной передачи пропсов на каждом уровне. Он решает проблему prop drilling, когда один и тот же пропс приходится протаскивать через десятки промежуточных компонентов, которые сами его не используют.

Когда Context уместен

Context хорошо подходит для данных, которые являются по сути глобальными для приложения или крупной его части и меняются нечасто:

• тема оформления (светлая/тёмная);
• текущий язык и локализация;
• данные авторизованного пользователя и права доступа;
• настройки приложения, например размер шрифта;
• сервисы и зависимости, передаваемые через DI-подобный паттерн.

Когда Context не подходит

Главная проблема Context — при изменении значения перерисовываются все компоненты, которые его читают, даже если им нужна только часть данных. Поэтому плохая идея хранить в контексте:

• состояние формы с частым вводом;
• счётчики, таймеры, анимации;
• большие списки с частыми обновлениями;
• серверные данные, для которых есть React Query или SWR.

Пример использования

const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>OK</button>;
}

Здесь тема меняется редко, а читают её многие компоненты — идеальный кандидат для Context. Если бы значение менялось на каждый ввод символа, это вызвало бы лишние перерисовки всего поддерева.

Итог: используйте Context для стабильных глобальных данных, которые нужны многим компонентам, а для часто меняющегося состояния выбирайте локальный state или специализированные библиотеки управления состоянием.