PassFront
  1. PassFront
  2. База знаний
  3. Хуки

В чем разница между React Context и useContext?

Хуки

Это не конкурирующие вещи, а части одного механизма: React Context — сам инструмент (объект контекста с Provider), useContext — хук для его чтения в функциональном компоненте.

Как соотносятся

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

// 2. Provider — часть Context: кладёт значение в поддерево
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// 3. useContext — способ ПРОЧИТАТЬ это значение
const theme = useContext(ThemeContext);

Context без useContext возможен (другие способы чтения), useContext без Context — нет: хук принимает объект контекста аргументом.

Способы чтения контекста

  • useContext(Ctx) — стандартный способ в функциональных компонентах (React 16.8+).
  • `<Ctx.Consumer>{(value) => ...}</Ctx.Consumer>` — render-prop, дохуковый способ (актуален разве что в классах).
  • static contextType = Ctx — для классовых компонентов (this.context).
  • В React 19 добавился use(Ctx) — как useContext, но можно вызывать в условиях.

Все способы эквивалентны по поведению: компонент-читатель перерендеривается при изменении value ближайшего провайдера.

Почему возникает путаница

В обиходе «использовать Context» и «использовать useContext» звучат взаимозаменяемо. Корректно так: Context — механизм передачи данных сквозь дерево (createContext + Provider), useContext — API доступа к нему из хуков.

Коротко для собеседования

React Context — сам механизм: createContext создаёт объект, Provider кладёт значение в поддерево. useContext — хук, читающий это значение (одна из форм чтения наряду с Consumer и contextType в классах). Сравнивать их как альтернативы некорректно — хук работает поверх контекста.

Другие вопросы раздела