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:

Installs
18
GitHub Stars
18
First Seen
Feb 3, 2026