useRef()

مرجع يبقى بين عمليات العرض useRef()

useRef يعطي صندوقًا (كائن فيه current) يستمرّ بين عمليات العرض، وتغيّره لا يسبّب إعادة رسم المكوّن.

useRef(initial) يُرجع كائنًا ثابتًا شكله { current: initial } يبقى نفسه طوال عمر المكوّن. عكس useState، تغيير .current لا يُعيد رسم المكوّن — لذلك يُستخدم لقيم لا تحتاج ظهورًا فوريًا في الواجهة.

الاستخدامان الأشهر: الوصول المباشر لعنصر DOM عبر تمرير الـ ref للخاصية ref={...}، وحفظ قيم بين عمليات الرندر (مثل معرّف مؤقّت أو القيمة السابقة) دون إعادة رسم.

الصياغة

const ref = useRef(initialValue);
// الوصول: ref.current

📄 مثال

function SearchBox() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>تركيز</button>
    </>
  );
}

أهم المعاملات

المعامل	الوظيفة
initialValue	القيمة الابتدائية لـ .current
.current	الخاصية القابلة للقراءة والتعديل المباشر بلا إعادة رندر

💡 نصائح عملية

لا تقرأ أو تكتب ref.current أثناء الرندر نفسه — فقط داخل معالجات الأحداث أو useEffect
استخدمه لحفظ معرّف setInterval/setTimeout لتتمكّن من إلغائه لاحقًا

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

استخدام useRef لعرض بيانات في الواجهة — التغيير لا يُحدّث الشاشة؛ الحل الصحيح useState
الوصول لـ ref.current قبل التركيب الأول (mount) — تكون قيمته null حينها

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار REACT الكامل بالعربي.