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

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

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

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

Контент

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

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

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

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

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

### 1. Проблема prop drilling

Коли потрібно передати одне й те саме значення (наприклад, `user`, `theme`, `lang`) **углиб дерева компонентів**, доводиться передавати його **через усі рівні вручну** - навіть якщо проміжним компонентам воно не потрібне.

#### Без Context:

```javascript
function App() {
  const user = { name: "Tim" };
  return <Layout user={user} />;
}

function Layout({ user }) {
  return <Header user={user} />;
}

function Header({ user }) {
  return <UserMenu user={user} />;
}

function UserMenu({ user }) {
  return <p>Привіт, {user.name}</p>;
}
```

Мінуси:

- купу компонентів доводиться "проколювати" `user`, хоча він їм не потрібен;
- якщо структура змінюється, потрібно міняти пропси всюди;
- код стає шумним і важким у підтримці.

---

### 2. Як Context вирішує це

Context дозволяє **створити глобальне джерело даних**, до якого можна отримати доступ з будь-якого місця в дереві **без пропсів**.

```javascript
const UserContext = createContext();

function App() {
  const user = { name: "Tim" };
  return (
    <UserContext.Provider value={user}>
      <Layout />
    </UserContext.Provider>
  );
}

function UserMenu() {
  const user = useContext(UserContext);
  return <p>Привіт, {user.name}</p>;
}
```

Тепер `UserMenu` напряму бере `user` з контексту - без посередників.

---

### 3. Типові сценарії, де Context корисний

| Проблема | Рішення через Context |
|---|---|
| Передача теми оформлення (dark/light) | `ThemeContext` |
| Мова інтерфейсу / локалізація | `LanguageContext` |
| Поточний користувач (auth) | `AuthContext` |
| Налаштування застосунку / конфіг | `SettingsContext` |
| Глобальні дані UI (наприклад, модалки, сповіщення) | `UIContext` |

---

### 4. Що Context **не вирішує**

- Не призначений для **складного стану**, логіки чи асинхронних даних.
- Не оптимізований для **частих оновлень стану** (кожна зміна value спричиняє ререндер усіх споживачів).
У таких випадках краще використовувати Redux, Zustand, Jotai, Recoil тощо.

---

### Підсумок

**Context вирішує:**

1. Проблему "prop drilling" - позбавляє від зайвої передачі props.
2. Дозволяє централізовано зберігати спільні дані.
3. Робить код чистішим і простішим у супроводі.

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

Для рев’юера

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

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