Як створити Context?

ReactJunior~1 хв читання

Крок 1. Імпортуємо `createContext`

javascript

import { createContext } from "react";

Крок 2. Створюємо сам контекст

javascript

export const ThemeContext = createContext("light");

Що робить `createContext(defaultValue)`:

створює об'єкт контексту;
defaultValue використовується лише якщо немає <Provider> вище по дереву.

Зазвичай defaultValue задають лише для типів (наприклад, при TypeScript) або тестів.

Крок 3. Обгортаємо потрібну частину застосунку в Provider

javascript

import { ThemeContext } from "./ThemeContext";

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

Що робить Provider:

робить значення (value="dark") доступним усім дочірнім компонентам;
при зміні value -> усі споживачі перерахуються.

Крок 4. Використовуємо контекст всередині компонента

javascript

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

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

  return <button className={theme}>Тема: {theme}</button>;
}

Що робить `useContext(Context)`:

повертає поточне значення контексту (з найближчого Provider);
при зміні цього значення компонент автоматично перерендериться.

Повний приклад:

javascript

// ThemeContext.js
import { createContext } from "react";
export const ThemeContext = createContext("light");

// App.jsx
import { ThemeContext } from "./ThemeContext";
import Button from "./Button";

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <div>
        <h1>Приклад контексту</h1>
        <Button />
      </div>
    </ThemeContext.Provider>
  );
}

// Button.jsx
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

export default function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Поточна тема: {theme}</button>;
}

Часті помилки та поради

Помилка	Як виправити
Використання `useContext` без Provider	Додати `<Context.Provider>` вище в дереві
Кожен ререндер App змінює об'єкт `value={{user}}`	Обгортати `value` в `useMemo`
Використання одного контексту для всього поспіль	Розділяй за змістом: `ThemeContext`, `AuthContext`, `LangContext` тощо

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.