Как происходит подписка на изменения в Context API?

Как работает подписка на изменения в Context API

В React Context API подписка на изменения реализуется автоматически при использовании хука useContext или компонента Consumer. Когда компонент вызывает useContext(MyContext), он регистрируется как подписчик на этот контекст. При изменении значения, переданного в Provider, React уведомляет всех подписанных компонентов и запускает их повторный рендер.

Пример кода

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

const ThemeContext = createContext('light');

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

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

Особенности подписки

• Подписка происходит на уровне контекста, а не на отдельные поля значения. Если значение — объект, любое изменение объекта вызовет перерендер всех подписчиков.
• Для оптимизации можно мемоизировать значение с помощью useMemo, чтобы избежать лишних рендеров.
• Компоненты, не использующие контекст, не подписываются и не перерендериваются при его изменении.

Вывод

Context API удобен для передачи глобальных данных (тема, авторизация, язык) без пропс-дриллинга. Однако стоит применять его с осторожностью для часто изменяемых данных, так как это может вызвать избыточные рендеры. Для сложных состояний лучше использовать Redux или другие библиотеки управления состоянием.