> Что такое React Context и как работает хук useContext (React)

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

React Context - это механизм для передачи данных через дерево компонентов без необходимости прокидывать props через каждый уровень вручную. Хук useContext позволяет функциональному компоненту подписаться на значение ближайшего Context.Provider и перерендериваться при его изменении. Это удобно для глобальных данных вроде темы, локали или аутентификации.

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

React Context решает проблему prop drilling - передачи props через множество промежуточных компонентов, которые сами не используют эти данные. Он состоит из двух частей: Provider (поставщик) и Consumer (потребитель). Provider оборачивает дерево компонентов и передаёт значение всем дочерним элементам.

Хук useContext - это современный способ подписаться на контекст в функциональных компонентах. Он принимает объект контекста (созданный через React.createContext) и возвращает текущее значение. Когда значение в Provider меняется, все компоненты, использующие useContext, автоматически перерендериваются.

Важно понимать, что контекст не оптимизирован для частых обновлений - любое изменение значения вызывает перерендер всех потребителей. Для высокодинамичных данных лучше использовать state management библиотеки или комбинировать контекст с useMemo.

На практике

Контекст идеален для данных, которые редко меняются и нужны многим компонентам: тема оформления, язык интерфейса, данные текущего пользователя. Не стоит помещать в контекст часто обновляемые данные (например, позицию мыши или ввод текста), так как это приведёт к избыточным перерендерам.

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

Пример кода

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

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

// Компонент-потребитель
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ 
      background: theme === 'dark' ? '#333' : '#fff',
      color: theme === 'dark' ? '#fff' : '#333'
    }}>
      Текущая тема: {theme}
    </button>
  );
}

// Provider на верхнем уровне
function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={theme}>
      <ThemedButton />
      <button onClick={() => setTheme(
        theme === 'light' ? 'dark' : 'light'
      )}>
        Переключить тему
      </button>
    </ThemeContext.Provider>
  );
}

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

Начни с краткого определения контекста и его назначения. Затем объясни механизм работы: создание через createContext, Provider с value, и подписка через useContext. Упомяни, что useContext заменяет старый паттерн Context.Consumer с render props.

Подчеркни, что контекст решает проблему prop drilling, но не является заменой state management для сложных состояний. Приведи примеры подходящего использования: тема, локализация, аутентификация.

Будь готов обсудить ограничения: все потребители перерендериваются при любом изменении значения. Если спросят про оптимизацию, упомяни разделение контекстов и использование useMemo для value.

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

Интервьюер оценивает понимание базовых механизмов React: как работает поток данных, что такое prop drilling и как его избежать. Важно показать, что ты различаешь контекст и state management - контекст не предназначен для частых обновлений и не имеет встроенной оптимизации.

Также проверяется знание хуков и умение применять useContext в реальных сценариях. Хороший ответ включает понимание trade-off: контекст удобен, но может вызывать лишние перерендеры.

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

• Путать контекст с глобальным состоянием - контекст это механизм передачи данных, а не хранилище
• Помещать в контекст часто меняющиеся данные без оптимизации
• Создавать один большой контекст для всего приложения вместо нескольких маленьких
• Забывать, что useContext работает только внутри компонента, который находится под Provider
• Использовать контекст для данных, которые можно передать через props без глубокой вложенности