Що робить <Context.Provider>?

ReactJunior~1 хв читання

Що робить `<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>;
}

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

Ми створили контекст ThemeContext.
У компоненті App обгорнули дочірні компоненти в <ThemeContext.Provider>.
Вказали value="dark".
Компонент 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 викликає перерендер усіх споживачів контексту.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Що робить <Context.Provider>?