Каково время жизни данных в Context?

Context в React — это механизм передачи данных вглубь дерева компонентов без явной передачи пропсов на каждом уровне. Время жизни данных в Context напрямую связано с жизненным циклом компонента, который создаёт и предоставляет это значение через Provider.

Где хранится значение

Значение Context не хранится где-то отдельно в React — оно живёт в состоянии (state) или переменной того компонента, который рендерит Provider. Обычно это useState, useReducer или просто константа.

const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  // theme живёт, пока смонтирован App
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Жизненный цикл

• Пока компонент-провайдер смонтирован, значение доступно всем потребителям через useContext или Context.Consumer.
• При обновлении значения (например, через setTheme) React перерисовывает всех потребителей этого Context.
• Когда провайдер размонтируется, значение уничтожается вместе с его состоянием, и потребители больше не смогут его получить.
• При повторном монтировании провайдера значение создаётся заново с начальным состоянием.

Практические следствия

Если нужно, чтобы данные переживали размонтирование компонента, их следует хранить вне React — например, в глобальном сторе (Redux, Zustand), в localStorage или на сервере. Context — это лишь транспорт для данных, а не хранилище с собственным временем жизни.

Также важно помнить: Context не оптимизирует ре-рендеры сам по себе. Любое изменение значения провайдера перерисует всех потребителей, поэтому для часто меняющихся данных лучше использовать специализированные решения.

Итог: данные в Context живут ровно столько, сколько существует компонент-провайдер. Context удобен для передачи редко меняющихся значений (тема, локаль, текущий пользователь), но не подходит как долговременное хранилище состояния.