استخدام React Refs و hook useRef
يستخدم React نهجاً تصريحياً (declarative). تقوم بتحديث الحالة (state)، ويقوم React بتحديث واجهة المستخدم (UI). هذا يعمل لمعظم المهام.
ولكن في بعض الأحيان، تحتاج إلى الخروج عن نطاق الـ Virtual DOM. قد تحتاج إلى التعامل مع عنصر HTML حقيقي بشكل مباشر. هنا يأتي دور الـ Refs و hook useRef.
ما هو الـ Ref؟ الـ Ref هو مؤشر (pointer). يقوم بربط React مباشرة بعقدة DOM أصلية (native DOM node).
لماذا نستخدم useRef بدلاً من useState؟
تحديثات الحالة (State) تؤدي إلى إعادة الصيرورة (re-render). وهذا يعني أن React يعيد رسم المكون على الشاشة.
تحديثات الـ Ref لا تؤدي إلى إعادة الصيرورة. وهذا يجعلها مثالية للقيم التي تتغير ولكن لا تحتاج إلى الظهور في واجهة المستخدم فوراً.
حالات الاستخدام الشائعة: • التركيز (Focusing) على حقل إدخال تلقائياً. • التحكم في عناصر الفيديو أو الصوت (تشغيل/إيقاف مؤقت). • قياس عرض أو ارتفاع عنصر ما. • تخزين معرفات المؤقتات (timer IDs) للفترات الزمنية (intervals) أو المهلات (timeouts).
كيفية استخدام useRef:
- استيراد
useRefمن React. - تهيئته:
const myRef = useRef(null). - ربطه بعنصر:
<input ref={myRef} />. - الوصول إلى القيمة عبر:
myRef.current.
المثال 1: التركيز التلقائي على حقل إدخال
عندما يدخل المستخدم إلى صفحة ما، تريد أن يكون المؤشر داخل مربع النص. يمكنك استخدام useEffect لاستدعاء myRef.current.focus() بعد تحميل المكون (mount).
المثال 2: ساعة إيقاف (Stopwatch)
إذا قمت بتخزين معرف setInterval في الحالة (state)، فسيتم إعادة صيرورة المكون في كل مرة يعمل فيها المؤقت. هذا يجعل الأداء بطيئاً. أما إذا قمت بتخزين المعرف في ref فسيظل المكون سريعاً. تظل القيمة آمنة عبر عمليات إعادة الصيرورة دون التسبب في عمل إضافي للمتصفح.
الحالة (State) مقابل الـ Ref: • State: تُحفز إعادة الصيرورة (re-render). تُستخدم لبيانات واجهة المستخدم. التحديثات غير متزامنة (asynchronous). • Ref: لا تُحفز إعادة الصيرورة. تُستخدم للوصول إلى الـ DOM وللذاكرة. التحديثات متزامنة (synchronous).
نصائح احترافية للمطورين المحترفين (Seniors):
• تجنب الإفراط في الاستخدام. استخدم الـ refs فقط عندما يفشل المنطق التصريحي (declarative logic).
• تنظيف الذاكرة. قم دائماً بمسح الـ intervals أو مستمعي الأحداث (event listeners) في دالة التنظيف (cleanup function) الخاصة بك.
• لا تقم بالكتابة في الـ refs أثناء عملية الصيرورة (rendering). قم بتحديث ref.current فقط داخل useEffect أو معالجات الأحداث (event handlers). هذا يمنع الآثار الجانبية (side effects).
• استخدم forwardRef. إذا كنت تريد تمرير ref إلى مكون فرعي مخصص، يجب عليك تغليف ذلك المكون بـ React.forwardRef.
المصدر: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde