hydration-safe-inputs
Installation
SKILL.md
Hydration-Safe Inputs
The Problem
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).
Timeline:
1. HTML arrives → input rendered (empty)
2. User types "hello" → input shows "hello"
3. React hydrates → useState("") runs → input wiped to ""
The Fix
Initialize state by reading the DOM element's current value instead of a hardcoded default: