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

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

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

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

Контент

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

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

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

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

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

Так - **у React можна (і часто потрібно) використовувати декілька контекстів одночасно.**
Це абсолютно нормальна і рекомендована практика.

---

## Навіщо взагалі декілька контекстів?

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

Тому краще **ділити контексти за зонами відповідальності**:

| Контекст | Відповідає за |
|---|---|
| `ThemeContext` | Тема застосунку (light/dark) |
| `AuthContext` | Авторизація і користувач |
| `LangContext` | Поточна мова інтерфейсу |
| `UIContext` | Модалки, сповіщення, layout-стани |
| `SettingsContext` | Налаштування користувача |

---

## Приклад декількох контекстів

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

const ThemeContext = createContext("light");
const UserContext = createContext({ name: "Guest" });

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: "Alex" }}>
        <Profile />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function Profile() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

return (
    <div className={theme}>
      <h1>Hello, {user.name}!</h1>
      <p>Тема: {theme}</p>
    </div>
  );
}
```

Тут:

- `App` обгортає компоненти одразу у два провайдери;
- `Profile` отримує обидва значення через два `useContext()`.

---

## Порядок Providers не важливий,

поки кожен з них **замикає потрібні компоненти**.

```javascript
<AuthContext.Provider value={user}>
  <ThemeContext.Provider value={theme}>
    <App />
  </ThemeContext.Provider>
</AuthContext.Provider>
```

або

```javascript
<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={user}>
    <App />
  </AuthContext.Provider>
</ThemeContext.Provider>
```

Обидва варіанти працюватимуть однаково.

---

## Декілька контекстів через `<Context.Consumer>`

Якщо ти працюєш з класами або без хуків:

```javascript
<ThemeContext.Consumer>
  {theme => (
    <UserContext.Consumer>
      {user => (
        <p>{user.name} використовує тему {theme}</p>
      )}
    </UserContext.Consumer>
  )}
</ThemeContext.Consumer>
```

Але це швидко стає громіздким - у функціональних компонентах завжди краще `useContext`.

---

## Підсумок

Можна і **потрібно** використовувати декілька контекстів.
Кожен контекст - для своєї "області відповідальності".
Компонент може споживати **скільки завгодно контекстів** через `useContext`.
Це покращує **структуру, читабельність і продуктивність**.

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

Для рев’юера

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

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