Для чего нужен провайдер контекста?

Провайдер контекста (Context Provider) нужен, чтобы предоставить значение контекста всем компонентам внутри него — сделать данные доступными поддереву без prop drilling.

Что делает

Provider оборачивает часть дерева и задаёт значение, которое становится доступным всем потомкам через useContext:

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark"> {/* провайдер */}
      <Toolbar /> {/* и все потомки видят "dark" */}
    </ThemeContext.Provider>
  );
}

function Button() {
  const theme = useContext(ThemeContext); // получает "dark"
}

Зачем нужен

• Предоставить значение — без провайдера useContext вернёт значение по умолчанию.
• Область действия — значение доступно только внутри провайдера (можно вкладывать разные значения для разных поддеревьев).
• Обновление — при смене value потребители перерисовываются с новым значением.

Вложенность провайдеров

<ThemeProvider>
  <AuthProvider>
    <App /> {/* видит и тему, и авторизацию */}
  </AuthProvider>
</ThemeProvider>

Нюансы

• При изменении value все потребители перерисовываются — для частых изменений разделяют контексты.
• Значение обычно приходит из useState/useReducer в компоненте-провайдере.

Коротко для собеседования

Провайдер контекста (Context.Provider) предоставляет значение всем компонентам внутри него — делает данные доступными поддереву через useContext без prop drilling. Задаёт область действия (разные значения для разных поддеревьев) и обновляет потребителей при смене value. Без провайдера используется значение по умолчанию.