useContext

Позволяет передать данные минуя пропсы.

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

Что делает useContext?

useContext принимает объект контекста (созданный с помощью React.createContext) и возвращает текущее значение этого контекста. Значение контекста определяется ближайшим компонентом <Context.Provider>, который находится выше в дереве компонентов.

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

1. Когда нужно передать данные (например, тему оформления, данные пользователя, настройки) глубоко в дерево компонентов без передачи пропсов.
2. Для глобального состояния, хотя для сложных случаев часто используют Redux или Zustand.

Пример кода

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

//Пример с темой оформления

const ThemeContext = createContext();

function App() {
  const theme = "dark";
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Текущая тема: {theme}</div>; // Выведет: Текущая тема: dark
}

export default App;

Важно

1. useContext можно вызывать только в функциональных компонентах и только на верхнем уровне (не внутри циклов или условий).
2. Если значение в Provider изменится, все компоненты, использующие useContext, перерендерятся.