useContext це хук, який дозволяє читати контекст компонента та підписуватися на нього.

const value = useContext(SomeContext)

Опис

useContext(SomeContext)

Викличте useContext на верхньому рівні компонента, щоб прочитати та підписатися на контекст.

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

Перегляньте більше прикладів нижче.

Параметри

  • SomeContext: це об’єкт контексту, який було створено за допомогою функції createContext. Контекст безпосередньо не містить інформацію, він лише визначає, що ви можете передати або отримати з компонентів.

Результат

useContext повертає значення контексту для компонента, що викликає цей хук. Це значення визначається як value, передане найближчому SomeContext.Provider, розташованому вище деревом відносно поточного компонента. Якщо такого провайдера немає, повертається значення defaultValue, яке ви передали функції createContext. Повернуте значення завжди актуальне. React автоматично повторно рендерить усі компоненти, що використовують контекст, якщо значення контексту змінюється.

Застереження

  • Eлементи-провайдери не впливають на виклик useContext() у компоненті, з якого й повертаються. Відповідний <Context.Provider> повинен бути розташований вище компонента, що викликає useContext().
  • React автоматично оновлює всі дочірні компоненти, які використовують певний контекст, починаючи з провайдера, що отримує змінене значення value. Попереднє та наступне значення порівнюються за допомогою Object.is. Пропуск повторних рендерів за допомогою memo не заважає дочірнім компонентам отримувати оновлене значення контексту.
  • Якщо ваша система збірки створює дублікати модулів у вихідному коді (що може статися через символьні посилання), це може порушити контекст. Передавання через контекст працює тільки у разі, якщо SomeContext для надання контексту та SomeContext для його зчитування є точно тим самим об’єктом, що визначається порівнянням ===.

Використання

Передавання даних глибоко в дерево компонентів

Викликайте useContext на верхньому рівні вашого компонента, щоб зчитувати та підписуватися на контекст.

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);
  // ...

useContext повертає значення для контексту, який ви передали. Щоб визначити це значення, React шукає деревом компонентів та знаходить найближчого провайдера вище для цього конкретного контексту.

Щоб передати контекст до компонента Button, обгорніть його або один із його батьківських компонентів у відповідний провайдер:

function MyPage() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  );
}

function Form() {
  // ... рендерить кнопки всередині ...
}

Не має значення, скільки шарів компонентів між провайдером та Button. Якщо Button у будь-якому місці всередині Form викликає useContext(ThemeContext), він отримає "dark" у якості значення.

Pitfall

useContext() завжди шукає найближчого провайдера над компонентом, що його викликає. Він просувається вгору деревом компонентів і не враховує провайдери в тому самому компоненті, де викликається useContext().

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Ласкаво просимо">
      <Button>Зареєструватися</Button>
      <Button>Увійти</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

Оновлення даних, переданих через контекст

Часто виникає потреба змінювати контекст. Щоб оновлювати контекст, поєднайте його зі станом. Оголосіть змінну стану в батьківському компоненті та передайте поточний стан як значення контексту провайдеру.

function MyPage() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <Button onClick={() => {
        setTheme('light');
      }}>
        Увімкнути світлу тему
      </Button>
    </ThemeContext.Provider>
  );
}

Тепер будь-який Button всередині провайдера отримає поточне значення theme. Якщо викличете setTheme, щоб оновити значення theme, яке передається провайдеру, всі компоненти Button автоматично відрендеряться з новим значенням 'light'.

Приклад оновлення контексту

Example 1 of 5:
Оновлення значення за допомогою контексту

У цьому прикладі компонент MyApp містить змінну стану, яка передається провайдеру ThemeContext. Вибір прапорця “Темний режим” оновлює стан. Зміна переданого значення викликає повторний рендер усіх компонентів, які використовують цей контекст.

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

const ThemeContext = createContext(null);

export default function MyApp() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <label>
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={(e) => {
            setTheme(e.target.checked ? 'dark' : 'light')
          }}
        />
        Темний режим
      </label>
    </ThemeContext.Provider>
  )
}

function Form({ children }) {
  return (
    <Panel title="Ласкаво просимо">
      <Button>Зареєструватися</Button>
      <Button>Увійти</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

Зверніть увагу, що value="dark" передає стрічкову змінну "dark", але value={theme} передає значення змінної JavaScript theme із фігурними дужками JSX. Фігурні дужки також дають змогу передавати значення контексту, які не є стрічками.

Задання початкового значення

Якщо React не знайде жодного провайдера для конкретного контексту у дереві батьківських компонентів, значення, яке повертає useContext(), буде дорівнювати початковому значенню, вказаному під час створення контексту:

const ThemeContext = createContext(null);

Початкове значення ніколи не змінюється. Якщо ви хочете оновити контекст, використовуйте його разом зі станом, як описано вище.

Зазвичай замість null можна визначити якесь більш змістовне початкове значення, наприклад:

const ThemeContext = createContext('light');

Так, якщо випадково відрендерите якийсь компонент без відповідного провайдера, це не призведе до помилки. І також допоможе компонентам відпрацювати в тестовому середовищі без налаштування провайдерів.

У прикладі нижче кнопка “Перемкнути тему” завжди буде світлою, тому що вона знаходиться поза жодним провайдером теми, а початкове значенням теми — 'light'. Спробуйте змінити початкову тему на 'dark'.

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

const ThemeContext = createContext('light');

export default function MyApp() {
  const [theme, setTheme] = useState('light');
  return (
    <>
      <ThemeContext.Provider value={theme}>
        <Form />
      </ThemeContext.Provider>
      <Button onClick={() => {
        setTheme(theme === 'dark' ? 'light' : 'dark');
      }}>
        Перемкнути тему
      </Button>
    </>
  )
}

function Form({ children }) {
  return (
    <Panel title="Ласкаво просимо">
      <Button>Зареєструватися</Button>
      <Button>Увійти</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children, onClick }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
}

Перевизначення контексту частини дерева

Можливо перевизначити контекст для частини дерева компонентів, обгорнувши цю частину у провайдер з іншим значенням.

<ThemeContext.Provider value="dark">
  ...
  <ThemeContext.Provider value="light">
    <Footer />
  </ThemeContext.Provider>
  ...
</ThemeContext.Provider>

Провайдери можна вкладати і перевизначати без обмежень.

Приклади перевизначення контексту

Example 1 of 2:
Перевизначення теми

У цьому прикладі кнопка всередині Footer отримує інше значення контексту ("light"), ніж кнопки зовні ("dark").

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Ласкаво просимо">
      <Button>Зареєструватися</Button>
      <Button>Увійти</Button>
      <ThemeContext.Provider value="light">
        <Footer />
      </ThemeContext.Provider>
    </Panel>
  );
}

function Footer() {
  return (
    <footer>
      <Button>Налаштування</Button>
    </footer>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      {title && <h1>{title}</h1>}
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

Усунення зайвих рендерів під час передавання об’єктів і функцій

Ви можете передавати будь-які значення через контекст, включно з об’єктами та функціями.

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  function login(response) {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }

  return (
    <AuthContext.Provider value={{ currentUser, login }}>
      <Page />
    </AuthContext.Provider>
  );
}

Тут значення контексту є об’єктом JavaScript із двома властивостями, одна з яких є функцією. Щоразу, коли MyApp повторно рендериться (наприклад, під час оновлення маршруту), це буде інший об’єкт, що вказує на іншу функцію, тому React доведеться повторно рендерити всі глибоко розташовані в дереві компоненти, які викликають useContext(AuthContext).

У менших застосунках це не є проблемою. Однак немає потреби повторно рендерити компоненти, якщо основні дані, як-от currentUser, не змінилися. Щоб оптимізувати роботу React, ви можете обгорнути функцію login у useCallback, а створення об’єкта — в useMemo. Це є оптимізацією продуктивності:

import { useCallback, useMemo } from 'react';

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  const login = useCallback((response) => {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }, []);

  const contextValue = useMemo(() => ({
    currentUser,
    login
  }), [currentUser, login]);

  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}

Як наслідок цієї зміни, навіть якщо MyApp потребує повторного рендеру, компоненти, що викликають useContext(AuthContext), не потребуватимуть його, якщо currentUser не змінився.

Дізнайтеся більше про useMemo та useCallback.

Усунення несправностей

Компонент не бачить значення з провайдера

Існує кілька поширених причин, чому це може статися:

  1. Ви розміщуєте <SomeContext.Provider> у тому ж компоненті або нижче, ніж компонент, де викликано useContext(). Перемістіть <SomeContext.Provider> вище і зовні компонента, який викликає useContext().
  2. Можливо, ви забули обгорнути свій компонент у <SomeContext.Provider> або розмістили його в іншій, ніж задумали, частині дерева. Переконайтеся за допомогою React DevTools, що ієрархія компонентів налаштована правильно.
  3. Можливо, ви зіткнулися з проблемою збірки, через яку SomeContext із компонента-провайдера і SomeContext компонента-читача є різними об’єктами. Це може статися, наприклад, якщо ви використовуєте символьні посилання. Можете перевірити це, присвоївши їх глобальним змінним, як-от window.SomeContext1 і window.SomeContext2, а потім порівняти window.SomeContext1 === window.SomeContext2 в консолі. Якщо вони не тотожні, виправте цю проблему на рівні збірки.

Я завжди отримую undefined із контексту, хоча початкове значення інше

Можливо, у вас є провайдер без value у дереві:

// 🚩 Не працює: немає пропа value
<ThemeContext.Provider>
   <Button />
</ThemeContext.Provider>

Якщо ви забули вказати value, це еквівалентно передаванню value={undefined}.

Також, можливо, ви випадково застосували помилкову назву пропа:

// 🚩 Не працює: проп має називатися "value"
<ThemeContext.Provider theme={theme}>
   <Button />
</ThemeContext.Provider>

В обох випадках React покаже попередження у консолі. Щоб виправити це, назвіть проп value:

// ✅ Передача пропа value
<ThemeContext.Provider value={theme}>
   <Button />
</ThemeContext.Provider>

Зверніть увагу, що початкове значення, яке ви передали у createContext(defaultValue), застосовується, тільки якщо вище в ієрархії не знайдено жодного провайдера. Якщо в будь-якому місці дерева батьківських компонентів є <SomeContext.Provider value={undefined}>, компонент, що викликає useContext(SomeContext), отримає undefined як значення контексту.

PrevioususeCallback
NextuseDebugValue