Прошлое и будущее оптимизаций в React с помощью Context

20.05.2025, Ссылка на статью

Автор пишет о проблемах React.Context и возможных вариантах решения сейчас и в будущем. Основное назначение контекста в Реакте – управление состоянием, которое хорошо работает. Частое использование контекстов приводит к provider hell, который можно решить при помощи композиции:

const CombinedProviders = (props) => {
  const providers = [
    [Provider1, { value: props.value1 }],
    [Provider2, { value: props.value2 }],
    [Provider3, { value: props.value3 }],
  ];
  return providers.reduceRight(
    (children, [Provider, value]) =>
      <Provider {...value}>{children}</Provider>,
    props.children
  );
};

Однако композиция не решает проблем с динамическим состоянием, которое может ререндерить всё поддерево.

Следующим шагом к оптимизации является использование useContextSelector из одноименного пакета и useSyncExternalStore из самого Реакта. Хук useSyncExternalStore является очень полезным, если необходимо синхронизировать внешнее состояние, но он всё ещё имеет проблемы с параллельным рендерингом. Ну а для решения проблемы с параллельным рендерингом в React Labs анонсировали улучшение хука use(store), которое, возможно, позволит перейти к варианту использования внешних сторов, а не контекстов.