Для чего нужен Provider в Context API?

Назначение Provider в Context API

Provider — это компонент-обертка, который делает значение контекста доступным для всех дочерних компонентов в дереве React. Он решает проблему «prop drilling», когда данные нужно передавать через множество промежуточных компонентов.

Как это работает

Provider принимает проп value, который становится доступным через хук useContext или Consumer. Когда значение меняется, все подписанные компоненты перерисовываются.

Пример кода

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current theme: {theme}
    </button>
  );
}

Вывод

Provider используется для централизованного управления состоянием в React-приложениях, когда данные нужны многим компонентам на разных уровнях вложенности. Это особенно полезно для тем, локализации или данных пользователя.