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:

Risolti i problemi di idratazione di React in cui l'input dell'utente digitato prima dell'idratazione veniva cancellato/cancellato quando React prende il sopravvento. Da utilizzare quando (1) gli utenti segnalano che i campi di input vengono cancellati al caricamento della pagina, (2) lavorano con app React SSR/SSG (Next.js, Remix, Astro) che hanno input controllati, (3) controllano i moduli per la sicurezza dell'idratazione o (4) creano nuovi moduli in app React renderizzate staticamente. Fonte: ethanniser/hydration-test.