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

Короткий ответ

Глобальное состояние в React - это данные, доступные из любого компонента приложения без необходимости передавать их через props. Обычно реализуется через Context API, Redux, Zustand или другие state management библиотеки. Используется для хранения данных, которые нужны многим компонентам: информация о пользователе, тема оформления, настройки языка.

Подробное объяснение

В React каждый компонент имеет своё локальное состояние, управляемое через useState или useReducer. Проблема возникает, когда несколько компонентов на разных уровнях вложенности должны иметь доступ к одним и тем же данным. Передача через props (prop drilling) делает код громоздким и сложным в поддержке.

Глобальное состояние решает эту проблему, предоставляя единое хранилище данных, к которому любой компонент может обратиться напрямую. Основные подходы:

• Context API - встроенный механизм React для передачи данных через дерево компонентов без props
• Redux - популярная библиотека с предсказуемым управлением состоянием через actions и reducers
• Zustand - лёгкая альтернатива с минимальным boilerplate
• MobX - реактивное управление состоянием на основе observable

Важно понимать trade-off: глобальное состояние упрощает доступ к данным, но усложняет отслеживание изменений и может привести к лишним ререндерам, если не оптимизировать.

На практике

Для junior-разработчика обычно достаточно Context API. Используйте глобальное состояние для:

• аутентификации пользователя
• темы оформления (light/dark mode)
• локализации
• корзины в интернет-магазине

Не стоит помещать в глобальное состояние данные, которые используются только в одном компоненте или передаются всего на один уровень вложенности. Для таких случаев лучше использовать локальное состояние или props.

Пример кода

JSX
import { createContext, useContext, useState } from 'react';

// Создаём контекст
const ThemeContext = createContext();

// Провайдер, который оборачивает приложение
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Компонент, использующий глобальное состояние
function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff'
      }}
    >
      Текущая тема: {theme}
    </button>
  );
}

// Использование в приложении
function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

Как отвечать на собеседовании

Начните с простого определения: глобальное состояние - это данные, доступные всем компонентам. Приведите примеры использования: тема, пользователь, язык. Упомяните Context API как базовый инструмент и Redux/Zustand как более мощные решения для сложных приложений.

Покажите понимание, когда использовать глобальное состояние, а когда - локальное. Скажите, что избыточное использование глобального состояния усложняет код и снижает производительность.

Что проверяет интервьюер

• Понимание разницы между локальным и глобальным состоянием
• Знание инструментов для управления глобальным состоянием
• Умение выбирать правильный подход под задачу
• Понимание проблем, которые решает глобальное состояние (prop drilling)
• Осознание недостатков: сложность отладки, лишние ререндеры

Типичные ошибки

• Помещение всех данных в глобальное состояние без необходимости
• Непонимание, что Context API вызывает ререндер всех потребителей при изменении значения
• Использование Redux для простых приложений, где достаточно Context API
• Отсутствие мемоизации (useMemo, React.memo) при работе с глобальным состоянием
• Путаница между глобальным состоянием и серверным состоянием (данные с API)