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。

查看原文