Для чего нужен useContext? Какую проблему он решает?

Что такое useContext и зачем он нужен?

useContext — это хук в React, который позволяет компоненту подписаться на контекст и получать его текущее значение. Контекст — это механизм для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Основная проблема, которую решает useContext, — это пропс-дриллинг (props drilling), когда данные передаются через множество промежуточных компонентов, которые сами их не используют. Это делает код громоздким и сложным для поддержки.

Как это работает?

Сначала создается контекст с помощью React.createContext(). Затем компонент-провайдер оборачивает дочерние компоненты и передает значение через атрибут value. Любой компонент внутри провайдера может использовать useContext(MyContext), чтобы получить это значение. При изменении значения контекста все подписанные компоненты перерендериваются.

Пример кода

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

const ThemeContext = createContext('light');

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

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

Когда применять?

useContext идеален для глобальных данных, которые редко меняются, таких как тема, язык или аутентификация. Однако для часто обновляемого состояния (например, данные формы) лучше использовать Redux или другие библиотеки, так как контекст может вызывать лишние перерендеры. Вывод: useContext — простой и эффективный способ избежать пропс-дриллинга, но его стоит применять для данных, которые не меняются слишком часто.