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

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

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

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

Контент

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

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

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

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

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

## Що робить `<Context.Provider>` в React

`<Context.Provider>` - це **компонент-обгортка**, який **"надає" значення контексту** всім своїм нащадкам.
Він - **єдиний спосіб задати або змінити значення контексту**.

---

### Синтаксис

```javascript
<MyContext.Provider value={значення}>
  {/* нащадки, які зможуть використовувати цей контекст */}
</MyContext.Provider>
```

---

### Простіше кажучи:

`Provider` - це як "радіостанція",
а всі компоненти, які використовують `useContext(MyContext)`, - це "приймачі".
Provider "транслює" значення, і всі підписники отримують його.

---

### Приклад

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

const ThemeContext = createContext("light");

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

function Toolbar() {
  return <Button />;
}

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

Що відбувається:

1. Ми створили контекст `ThemeContext`.
2. У компоненті `App` обгорнули дочірні компоненти в `<ThemeContext.Provider>`.
3. Вказали `value="dark"`.
4. Компонент `Button` через `useContext(ThemeContext)` отримує `"dark"`, **навіть якщо він глибоко вкладений**.

---

### Важливі особливості

| Особливість | Опис |
|---|---|
| Область дії | Усі нащадки Provider мають доступ до `value` |
| Оновлення | Якщо `value` змінюється → всі підписники перерендерюються |
| Кілька рівнів | Можна вкладати кілька Providers з різними значеннями |
| Без Provider | Якщо компонент не обгорнутий у Provider, береться `defaultValue`, вказаний при `createContext(defaultValue)` |

---

### Приклад з оновленням значення

```javascript
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(t => t === "light" ? "dark" : "light")}>
        Перемкнути тему
      </button>
    </ThemeContext.Provider>
  );
}
```

Тепер усі компоненти, що використовують `useContext(ThemeContext)`, будуть **автоматично змінювати тему**, коли користувач натискає кнопку.

---

### Підсумок

`<Context.Provider>`**:**

- задає **значення контексту** (`value`),
- робить його **доступним усім вкладеним компонентам**,
- при зміні `value` викликає **перерендер усіх споживачів контексту**.

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

Для рев’юера

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

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