hydration-safe-inputs

In SSR/SSG React apps, there's a window between when HTML renders and when React hydrates. If a user types into an input during this window, React's hydration will wipe their input because React initializes state to the default value (usually empty string).

Initialize state by reading the DOM element's current value instead of a hardcoded default:

Search for these patterns that indicate potential hydration wipe issues:

Исправлены проблемы с гидратацией React, из-за которых пользовательский ввод, введенный до гидратации, стирался/очищался, когда React вступал во владение. Используйте, когда (1) пользователи сообщают об очистке полей ввода при загрузке страницы, (2) работают с приложениями SSR/SSG React (Next.js, Remix, Astro), которые имеют контролируемые входные данные, (3) проверяют формы на безопасность гидратации или (4) создают новые формы в статически отображаемых приложениях React. Источник: ethanniser/hydration-test.