متى يجب استخدام useRef وما الفارق الجوهري بينه وبين useState؟

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

يستخدم useRef لتخزين قيم قابلة للتعديل تدوم طوال عمر المكون دون التسبب في إعادة التصيير (Re-render) عند تعديلها، وكذلك للوصول المباشر لعقد الـ DOM.

الشرح

كائن الـ ref هو كائن JavaScript عادي يحتوي على خاصية .current. تعديل ref.current لا يشعر ريأكت بحدوث تغيير ولذلك لا يطلق دورة تصيير جديدة. يستخدم لتخزين معرّفات الـ Timers، وتخزين الحالة السابقة، والتحكم بالتركيز والوسائط داخل عناصر الـ DOM مباشرة.

مثال بالكود

function TextInputWithFocusButton() {
  const inputEl = useRef<HTMLInputElement>(null);

  const onButtonClick = () => {
    // الوصول المباشر لعنصر الـ DOM وتركيز المؤشر عليه
    inputEl.current?.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>تركيز المؤشر</button>
    </>
  );
}

أخطاء شائعة

• قراءة أو كتابة ref.current أثناء مرحلة الـ Render بدلاً من معالجات الأحداث أو الـ Effects.

أسئلة متابعة

• ما هو useImperativeHandle وكيف نستخدمه مع forwardRef للتحكم في واجهة المكون الابن؟

المصادر

• React docs — useRef