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:

Résoudre les problèmes d'hydratation de React où les entrées de l'utilisateur saisies avant l'hydratation sont effacées/effacées lorsque React prend le relais. À utiliser lorsque (1) les utilisateurs signalent que les champs de saisie s'effacent lors du chargement de la page, (2) travaillent avec des applications SSR/SSG React (Next.js, Remix, Astro) qui ont des entrées contrôlées, (3) vérifient les formulaires pour la sécurité de l'hydratation ou (4) créent de nouveaux formulaires dans des applications React rendues statiquement. Source : ethanniser/hydration-test.

Voir l'original