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:

Behebung von React-Hydratationsproblemen, bei denen Benutzereingaben vor der Hydratation gelöscht/gelöscht werden, wenn React übernimmt. Wird verwendet, wenn (1) Benutzer melden, dass Eingabefelder beim Laden der Seite gelöscht werden, (2) mit SSR/SSG-React-Apps (Next.js, Remix, Astro) arbeiten, die über kontrollierte Eingaben verfügen, (3) Formulare auf Flüssigkeitssicherheit prüfen oder (4) neue Formulare in statisch gerenderten React-Apps erstellen. Quelle: ethanniser/hydration-test.

Original anzeigen