Что можно делать с контекстом?

Работа с React Context API: возможности и практики

Контекст (Context) в React — это мощный механизм для сквозной передачи данных через дерево компонентов без необходимости явно передавать пропсы на каждом уровне. Вот ключевые операции, которые можно выполнять с контекстом:

1. Создание и предоставление контекста

Создаётся с помощью React.createContext(). Получаемый объект содержит Provider и Consumer.

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

// Предоставление значения через Provider
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

2. Потребление контекста в компонентах

Есть несколько способов получения значений из контекста:

Через Consumer (устаревший, но поддерживаемый способ)

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Кнопка</button>}
    </ThemeContext.Consumer>
  );
}

С помощью хука useContext (современный подход)

import React, { useContext } from 'react';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}

3. Динамическое обновление контекста

Контекст может содержать не только статические значения, но и функции для их обновления:

const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {}
});

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>
  );
}

4. Вложенные и множественные контексты

Можно использовать несколько контекстов одновременно:

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: 'Иван' }}>
        <Content />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function Content() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  
  return (
    <div className={`app ${theme}`}>
      Привет, {user.name}!
    </div>
  );
}

5. Оптимизация производительности

Важные аспекты работы с контекстом для предотвращения лишних ререндеров:

• Мемоизация значений контекста с помощью useMemo
• Разделение контекстов на логические группы
• Использование React.memo для потребителей контекста

function OptimizedProvider({ children }) {
  const [state, setState] = useState(initialState);
  
  const contextValue = useMemo(() => ({
    state,
    update: setState
  }), [state]); // Пересоздаётся только при изменении state

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
}

6. Кастомные хуки для контекста

Создание специализированных хуков для удобной работы с контекстом:

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme должен использоваться внутри ThemeProvider');
  }
  return context;
}

// Использование в компоненте
function Component() {
  const { theme, toggleTheme } = useTheme();
  // ...
}

7. Типизация в TypeScript

Контекст может быть строго типизирован:

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

// Кастомный хук с проверкой типов
function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth должен использоваться внутри AuthProvider');
  }
  return context;
}

8. Практические паттерны использования

• Глобальное состояние приложения (темы, аутентификация, настройки)
• Локализация и интернационализация (переключение языков)
• Feature flags и конфигурация
• Доступ к внешним сервисам (API клиенты, WebSocket соединения)
• Управление модальными окнами и уведомлениями

Важные ограничения и лучшие практики:

• Не использовать контекст для данных, которые часто изменяются — для этого лучше подходят специализированные решения вроде Redux, MobX или Zustand
• Избегать глубокого вложения Provider'ов — это может усложнить отладку
• Всегда предоставлять дефолтные значения для контекста, если это возможно
• Разделять контексты по ответственности вместо создания одного "глобального" контекста

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