> Что такое глобальное состояние в React (React, JavaScript)

Глобальное состояние в React - это данные, доступные из любого компонента приложения, в отличие от локального состояния, которое ограничено одним компонентом. Оно решает проблему «prop drilling» (передачи пропсов через несколько уровней вложенности) и упрощает синхронизацию данных между удаленными частями дерева компонентов.

Основные подходы к управлению глобальным состоянием:

• Context API встроенный механизм React для передачи данных через дерево без явной передачи пропсов. Подходит для небольших и средних приложений.

• Redux / Zustand / MobX - внешние библиотеки, предоставляющие более строгую архитектуру, дебаггинг и поддержку сложной логики (например, асинхронные действия, middleware).

• React Query / SWR - для управления серверным состоянием (кэширование, синхронизация с API), которое также может быть глобальным.

Пример с Context API:

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

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

function Header() {
  const { theme, setTheme } = useContext(ThemeContext);
  return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle</button>;
}

Глобальное состояние следует использовать осмысленно: избыточное применение усложняет код и снижает производительность из-за лишних ререндеров. Для простых случаев достаточно локального состояния или подъема состояния (lifting state up).