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

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

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

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

Контент

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

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

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

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

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

**Context в React** - це механізм, який дозволяє **передавати дані через дерево компонентів**, **не використовуючи props на кожному рівні**.

---

### Проблема, яку вирішує Context

Зазвичай дані в React передаються згори вниз через `props`:

```javascript
<App>
  <Header user={user} />
</App>
```

Але якщо `user` потрібен компоненту глибоко всередині дерева, доводиться **пробрасувати його через усі проміжні компоненти** - це називається **prop drilling**.
Context вирішує цю проблему.

---

### Як працює Context

Context дозволяє створити **глобальне сховище даних** (на рівні React-компонентів), до якого можуть підключатися будь-які дочірні компоненти, **не передаючи props вручну**.

---

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

#### 1. Створюємо контекст

```javascript
import { createContext } from "react";

export const ThemeContext = createContext("light");
```

#### 2. Обгортаємо компоненти в Provider

```javascript
import { ThemeContext } from "./ThemeContext";

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

#### 3. Підписуємося на контекст через useContext

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

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}
```

---

### Ключові елементи

| Елемент | Призначення |
|---|---|
| `createContext(defaultValue)` | Створює контекст з початковим значенням |
| `<Context.Provider value={...}>` | Робить значення доступним усім дочірнім компонентам |
| `useContext(Context)` | Дістає поточне значення контексту всередині компонента |

---

### Важливо пам'ятати

1. **Усі компоненти, що використовують контекст, будуть перерендерені**, якщо значення `value` зміниться.
2. Щоб оптимізувати - **мемоізуй value**:

```javascript
  const value = useMemo(() => ({ user, setUser }), [user]);
  <UserContext.Provider value={value}>...</UserContext.Provider>
  ```
3. Context **не замінює глобальні state managers** (Redux, Zustand тощо), але підходить для:
  - теми оформлення (light/dark),
  - мови інтерфейсу,
  - поточного користувача,
  - налаштувань UI.

---

### Просте порівняння

| Підхід | Коли використовувати |
|---|---|
| `props` | Локальні дані, що передаються на 1-2 рівні вниз |
| `context` | Спільні дані, потрібні в багатьох місцях застосунку |
| state managers (Redux, Zustand) | Складні стани з логікою, побічними ефектами, кешем тощо |

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

Для рев’юера

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

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