Что такое useContext в React?

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

Принцип работы:

1. Создание контекста: Используется React.createContext() для создания объекта контекста. Этот объект содержит Provider и Consumer (или используется useContext в функциональных компонентах).
2. Предоставление значения: Provider компонента контекста оборачивает дерево компонентов, которым нужно иметь доступ к значению. Через пропс value передается значение, которое будет доступно всем подписанным компонентам.
3. Получение значения: useContext(MyContext) вызывается внутри функционального компонента, где MyContext - созданный ранее контекст. Хук возвращает текущее значение контекста. Когда значение контекста меняется, компонент, использующий useContext, автоматически перерисовывается.

Преимущества:

• Простота передачи данных: Устраняет необходимость "протаскивать" пропсы через множество промежуточных компонентов (prop drilling).
• Глобальное состояние: Удобно для управления глобальным состоянием приложения (например, тема, аутентификация, локализация).
• Производительность: React оптимизирует рендер компонентов, которые используют useContext, перерисовывая только те, которые подписаны на изменения данного контекста.

Недостатки:

• Сложность отладки: Отследить, откуда приходит значение контекста, может быть сложнее по сравнению с пропсами.
• Производительность при частых обновлениях: Если значение контекста обновляется очень часто, это может привести к частым перерисовкам всех подписанных компонентов.

Пример:

import React, { createContext, useContext } from 'react';

// 1. Создание контекста
const ThemeContext = createContext('light');

// Компонент-провайдер
function ThemeProvider({ children }) {
  const theme = 'dark'; // Пример значения
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Компонент, использующий контекст
function ThemedComponent() {
  // 3. Получение значения контекста
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Тема: {theme}</div>;
}

// Применение
function App() {
  return (
    <ThemeProvider> {/* 2. Предоставление значения */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;