Избегаем ошибки гидратации с помощью useSyncExternalStore

Избегаем ошибки гидратации с помощью useSyncExternalStore

Статья рассматривает, как разработчики могут эффективно справляться с проблемами, связанными с несовпадением данных при гидратации в React. Гидратация — это процесс, при котором серверный рендеринг синхронизируется с клиентским. Ошибки на этом этапе могут приводить к неожиданным багам.

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

Статья также объясняет причины появления гидрационных ошибок и предлагает практические подходы для их минимизации, например, правильное управление состоянием и использование актуальных инструментов React для синхронизации данных.


const emptySubscribe = () => () => {}

function LastUpdated() {
const date = React.useSyncExternalStore(
emptySubscribe,
() => lastUpdated.toLocaleDateString(),
() => lastUpdated.toLocaleDateString('en-US')
)

return Last updated at: {date}
}


https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store

✍️ @React_lib