Что такое useSyncExternalStore и для чего он нужен?

Question

useSyncExternalStore — это хук React для безопасного подключения внешнего состояния к рендерингу. Он позволяет подписаться на внешний стор и гарантирует, что компонент всегда рендерится с актуальными данными. Этот хук решает проблемы, которые возникают при ручных подписках в условиях concurrent rendering и Strict Mode. Его используют как основу для state-менеджеров.

YeaHub · Accepted Answer

useSyncExternalStore появился как ответ на реальные архитектурные проблемы React.ОпределениеuseSyncExternalStore — это хук, который синхронизирует внешний источник данных с React-рендерингом, обеспечивая консистентность состояния во всех режимах работы React.Почему старые подходы стали проблемойПеред введением этого хука часто делали так:Подписка в useEffect.Внутри — setState для ререндера.Проблемы:Возможны рассинхронизации данных.Некорректная работа в concurrent rendering.Двойные подписки в StrictMode.Как работает useSyncExternalStoreХук принимает:Функцию подписки.Функцию чтения текущего состояния.const value = useSyncExternalStore(
  store.subscribe,
  store.getSnapshot
);
Что происходит:React читает текущее состояние синхронно.Подписывается на изменения.При изменении корректно планирует ререндер.Почему он считается “правильным”React сам управляет моментом чтения данных.Исключаются “рваные” состояния между рендерами.Поведение предсказуемо даже при прерываемых рендерах.Где используется на практикеRedux (useSelector внутри).Zustand.Любые кастомные external store.ВыводuseSyncExternalStore нужен для того, чтобы безопасно и корректно связать внешний стор с React, не ломая архитектуру и не рискуя багами в будущем.