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