حفظ معرفات المؤقتات بالمرجع | حفظ القيم المتغيرة دون إعادة تصيير عبر useRef

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يبرز المثال العملي الأشهر للمراجع القيمية في بناء ساعة الإيقاف والمتحكمات الزمنية؛ إذ يحتاج عرض الوقت المتصاعد على الشاشة إلى useState، بينما يتطلب زر الإيقاف الاحتفاظ بالمعرّف الرقمي الذي تعيده دالة setInterval() لتمريره لاحقاً إلى clearInterval().

ولأن المستخدم قد يضغط زر الإيقاف بعد عشرات التحديثات المتتالية للعداد، فإن تخزين المعرّف في intervalRef.current يضمن بقاءه سالماً وجاهزاً للإلغاء الفوري.

الصف 2 صورة توضيحية

مخطط يوضح مراحل عمل useRef: إنشاء الحاوية المبدئية وتعديل خاصية current في الأحداث وبقاء القيمة عبر التصييرات دون إعادة رسم

الصف 3 كود برمجي

HTML

const [tenths, setTenths] = useState(0);
const intervalRef = useRef(null);

function handleStart() {
  clearInterval(intervalRef.current);
  intervalRef.current = setInterval(() => {
    setTenths((t) => t + 1);
  }, 100);
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Storing Timer IDs in useRef حفظ معرفات المؤقتات بالمرجع

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (حفظ القيم المتغيرة دون إعادة تصيير عبر useRef)