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:

React가 인계받을 때 수화 전에 입력한 사용자 입력이 지워지거나 지워지는 React 수화 문제를 수정합니다. (1) 사용자가 페이지 로드 시 입력 필드가 지워지는 것을 보고할 때, (2) 입력이 제어된 SSR/SSG React 앱(Next.js, Remix, Astro)으로 작업할 때, (3) 수화 안전을 위한 양식을 감사할 때, 또는 (4) 정적으로 렌더링된 React 앱에서 새로운 양식을 구축할 때 사용합니다. 출처: ethanniser/hydration-test.

원본 보기