Как подписаться на контекст?

На контекст подписываются: в React — хуком `useContext(MyContext)` внутри компонента-потомка провайдера; в Vue — `inject`. Компонент перерисовывается при изменении значения контекста.

В React — useContext

const ThemeContext = createContext('light');

function Button() {
  const theme = useContext(ThemeContext); // подписка на контекст
  return <button className={theme}>OK</button>;
}

Компонент «подписан»: при изменении значения провайдера он перерисовывается с новым значением.

Требования

• Компонент должен быть потомком Provider:

<ThemeContext.Provider value="dark">
  <Button /> {/* получит "dark" */}
</ThemeContext.Provider>

• Без провайдера — используется значение по умолчанию.

В Vue — inject

// Предок: provide('theme', themeRef)
// Потомок:
const theme = inject('theme');

Нюанс перерисовок

При изменении значения контекста все подписанные (через useContext) компоненты перерисовываются. Для оптимизации:

• Разделять контексты (часто меняющиеся отдельно).
• Мемоизировать значение провайдера (useMemo).
• Селекторы (use-context-selector) для частичной подписки.

Старый способ (Consumer)

<ThemeContext.Consumer>
  {(theme) => <div>{theme}</div>}
</ThemeContext.Consumer>

useContext современнее и удобнее.

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

На контекст подписываются в React через useContext(MyContext) в компоненте-потомке провайдера (перерисовывается при изменении значения); в Vue — inject. Нужен провайдер выше по дереву. При изменении значения перерисовываются все подписчики — оптимизируют разделением контекстов, мемоизацией, use-context-selector. Старый способ — Context.Consumer.