معرّف فريد ثابت بين الخادم والمتصفح useId()

الصياغة

const id = useId();

📄 مثال

function PasswordField() {
  const hintId = useId();
  return (
    <>
      <label>
        كلمة المرور
        <input type="password" aria-describedby={hintId} />
      </label>
      <p id={hintId}>يجب أن تحتوي 8 خانات على الأقل</p>
    </>
  );
}

💡 نصائح عملية

• استدعِه مرة واحدة في المكوّن وأعد استخدام نفس المعرّف لعدة خصائص مرتبطة (id، htmlFor، aria-describedby)
• لا يحتاج وسائط — لا تستدعه داخل حلقة أو شرط، فقط على المستوى الأعلى للمكوّن

⚠️ أخطاء شائعة

• استخدامه كـ key داخل map على قائمة — المفاتيح يجب أن تأتي من بيانات القائمة نفسها لا من useId
• استخدامه كمفتاح تخزين مؤقت (cache key) — القيمة مستقرة أثناء التركيب لكنها قد تختلف بين رندر وآخر لنفس البيانات

خصائص ذات صلة