ماهو current في الخطاف useRef

إن useRef هو خطاف (Hook) يستخدم لإنشاء مرجع (ref) يمكن ربطه بعنصر DOM أو لتخزين قيمة لا تؤدي إلى إعادة التصيير (re-render) عند تغييرها.

الكائن ref هو كائن يحتوي على خاصية واحدة فقط مهمة اسمها:

ref.current	

وهو الشكل الذي تحصل عليه من useRef().

والخاصية current هي التي تخزن القيمة المرجعية للعنصر وهي تتغير حسب الاستخدام:

فإذا تم استخدام ref مع عنصر DOM:

const myRef = useRef(null);

return <div ref={myRef}>Hello</div>;

بعد التصيير وبناء العنصر فإن myRef.current سيحتوي على العنصر DOM الفعلي مثل HTMLDivElement:

console.log(myRef.current); // <div>Hello</div>

وستلاحظ أن الخاصية ref للعنصر هنا تخبر React أن يقوم بإعطاء هذا العنصر DOM مرجع (Reference) وحفظه داخل الكائن myRef.current"

إذا تم استخدام ref لتخزين قيمة داخلية لا تؤدي إلى إعادة التصيير وإعادة بناء المكون :

const countRef = useRef(0);
countRef.current += 1;

هنا countRef.current مجرد قيمة رقمية يتم تخزينها وتحديثها بدون أن تقوم بإعادة تصيير المكون.

useRef هو أحد الخطافات (Hooks) في React ونحن نستخدمه لإنشاء مرجع (ref) يمكنه تخزين قيمة لا تتغير عبر إعادة التصيير (re-renders) دون أن تؤدي هذه القيمة إلى إعادة تصيير جديدة عند تغيّرها.

فعندما تستدعي useRef(initialValue) سيقوم React بإنشاء كائن يسمى ref يحتوي على خاصية واحدة اسمها current، ويتم تعيين القيمة الابتدائية initialValue إلى ref.current بحيث أن هذا الكائن ref سيكون ثابتا طوال عمر المكوّن، مما يعني أنه لن يتغير بين كل إعادة تصيير، بينما يمكنك تحديث ref.current يدويا بأي قيمة تريد.

الكائن ref يكون شكله كالتالي:

{ current: initialValue }

هذه البساطة تجعله مفيدا جدا لتخزين أي شيء لا يؤثر على واجهة المستخدم بشكل مباشر مثل مرجع لعنصر DOM فعند استخدام:

ref={myRef}

في JSX أو تخزين مؤقت لقيم مثل مؤقت زمني setTimeout، أو الحالة السابقة لمتغيّر معيّن، أو عدد النقرات وغير ذلك.

const myRef = useRef(0);
myRef.current += 1;

مثلا هنا نقوم بتخزين عدّاد في myRef.current، وسيتذكر هذا العدّاد القيمة بين كل إعادة تصيير، دون أن يسبب إعادة تصيير جديدة أما عند ربطه بعنصر DOM:

const inputRef = useRef(null);
<input ref={inputRef} />

ف inputRef.current في هذه الحالة سيشير إلى عنصر <input> في DOM بعد التصيير، ويمكنك مثلا استدعاء:

inputRef.current.focus()

لتركيز المؤشر في الحقل ليكون ref.current هو المكان الذي يخزّن فيه المرجع إلى العنصر أو القيمة.