React

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

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

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

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

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

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

  return <span>Last updated at: {date}</span>
}

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

✍️ @React_lib

www.tg-me.com/jp/telegram/com.React_lib/623

1.4K viewsDec 8, 2024 at 09:08

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

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

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

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

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

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

  return <span>Last updated at: {date}</span>
}

BY React