hydration-safe-inputs

SKILL.md

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:

Solucione los problemas de hidratación de React donde la entrada del usuario escrita antes de que la hidratación se borre/borre cuando React toma el control. Úselo cuando (1) los usuarios informan que los campos de entrada se borran al cargar la página, (2) trabajan con aplicaciones SSR/SSG React (Next.js, Remix, Astro) que tienen entradas controladas, (3) auditan formularios para la seguridad de la hidratación o (4) crean nuevos formularios en aplicaciones React renderizadas estáticamente. Fuente: ethanniser/hydration-test.

Ver original