ما هو useId ولماذا يعتبر ضرورياً لإنشاء معرفات فريدة متوافقة مع إمكانية الوصول (Accessibility) في SSR؟

الإجابة المختصرة

يقوم useId بتوليد معرّف نصي فريد ومستقر يكون متطابقًا بين السيرفر والعميل، مما يمنع تعارض الهوية وأخطاء الـ Hydration Mismatch.

الشرح

في تطبيقات SSR، يؤدي توليد معرفات عشوائية بواسطة Math.random() إلى اختلاف قيمة الـ ID المنشأة على الخادم عن تلك المنشأة في المتصفح، مسبباً Hydration mismatch. يوفر useId معرفاً هرمياً يعتمد على موضع المكون في شجرة الشفرة، وهو مثالي لربط عناصر aria-describedby وحقول النماذج بملصقاتها (labels).

مثال بالكود

function PasswordField() {
  const passwordHintId = useId();

  return (
    <div>
      <label>كلمة المرور: <input type="password" aria-describedby={passwordHintId} /></label>
      <p id={passwordHintId}>يجب أن تتكون من 8 أحرف على الأقل.</p>
    </div>
  );
}

أخطاء شائعة

• استخدام useId لإنشاء المفاتيح (keys) في القوائم والمصفوفات.

أسئلة متابعة

• ما هي معضلة الـ Hydration وما هي مسببات الـ Hydration Mismatch الشهيرة؟

المصادر

• React docs — useId