В чём разница между React Context и state-менеджерами (Redux, MobX)?

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

State-менеджеры (Redux, MobX) — это полноценные библиотеки для управления состоянием приложения, которые предлагают:

• централизованное хранилище состояния,
• предсказуемость изменений через действия и редьюсеры (Redux) или реактивные модели (MobX),
• инструменты для отладки и масштабирования.

Основные отличия:

• Context не предназначен для сложного управления состоянием и может приводить к лишним перерисовкам,
• Redux/MobX лучше подходят для больших приложений с множеством взаимодействующих состояний,
• Context проще и встроен в React, Redux/MobX требуют дополнительной настройки.

Пример использования Context для темы:

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

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = React.useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Toolbar</div>;
}