Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як створити Context?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Крок 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` тощо |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати293 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.