Что такое useContext?

Что такое useContext?

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

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

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

Пример кода

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

const ThemeContext = createContext('light');

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

Когда использовать?

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

Вывод: useContext — простой и эффективный способ делиться данными в React-приложении, особенно для статичных или редко меняющихся значений.