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。

查看原文