hydration-safe-inputs

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) العمل مع تطبيقات React SSR/SSG (Next.js، وRemix، وAstro) التي تحتوي على مدخلات متحكم فيها، أو (3) نماذج التدقيق لسلامة الترطيب، أو (4) إنشاء نماذج جديدة في تطبيقات React المقدمة بشكل ثابت. المصدر: ethanniser/hydration-test.