تنفيذ Custom Hook باسم useDebounce

يقبل الخطاف useDebounce قيمة وتأخيرًا بالمللي ثانية، ويُعيد نسخة مؤجَّلة باستخدام Debounce من تلك القيمة: function useDebounce(value, delay). وتتأخر القيمة المُعادة debouncedValue عن القيمة الفعلية، ولا تتحدث إلا بعد انقضاء التأخير المحدد دون حدوث تغيير آخر.

داخل الخطاف، صرّح بمتغير حالة: const [debouncedValue, setDebouncedValue] = useState(value). تحتفظ هذه الحالة بآخر قيمة تم اعتمادها. وتبدأ مساوية للقيمة الأولية، ولا تتحدث إلا بعد انطلاق مؤقت Debounce. وترى المكوّنات التي تقرأ debouncedValue إدخالًا مستقرًا ومستقرًا نهائيًا.

يوجد المنطق الأساسي داخل useEffect: أنشئ مؤقتًا باستخدام setTimeout(() => setDebouncedValue(value), delay) وخزّن معرّفه. ويُنفَّذ التأثير في كل مرة تتغير فيها value أو delay. ويُطلَق المؤقت بعد delay من المللي ثانية من آخر تغيير، محدّثًا حالة Debounce.

تستدعي دالة التنظيف الخاصة بـ useEffect الدالة clearTimeout(timerId). عندما تتغير value قبل انطلاق المؤقت، ينفذ React عملية التنظيف، فيلغي التحديث المعلّق. ثم يُجدول مؤقت جديد. هذه هي الآلية الأساسية التي تجعل Debounce يعمل: إذ تؤدي التغييرات السريعة إلى إعادة ضبط المؤقت باستمرار.

ينبغي أن تحتوي مصفوفة تبعيات useEffect على [value, delay]. يُعاد تنفيذ التأثير كلما تغيرت قيمة الإدخال، بحيث يُجدول مؤقت جديد، وكذلك كلما تغير delay، تحسبًا لتعديل المستدعي لفترة Debounce ديناميكيًا. يجب تضمين القيمتين لتجنب مشكلات الإغلاق القديم.

الاستخدام مباشر: const debouncedSearch = useDebounce(searchInput, 300). ويطلق useEffect منفصل يعتمد على [debouncedSearch] استدعاء API. تتحدث حالة الإدخال (searchInput) فورًا، مما يحافظ على استجابة حقل الإدخال؛ أما استدعاء API وحده فينتظر Debounce.

افتراضيًا، يعمل التنفيذ القياسي عند الحافة اللاحقة فقط. ولإضافة وضع "فوري" يستدعي الدالة عند أول تشغيل، ثم يطبّق Debounce على الاستدعاءات اللاحقة، تحتاج إلى ref لتتبع ما إذا كان الاستدعاء قد تم، وإعادة ضبطه بعد انتهاء المهلة. هذا أكثر تعقيدًا، لكنه مفيد لأزرار الإرسال.

اجعل الخطاف عامًا لضمان سلامة الأنواع: function useDebounce(value: T, delay: number): T. يتيح ذلك لـ TypeScript استنتاج نوع debouncedValue من نوع value. وينتقل المعامل العام T تلقائيًا عبر الحالة الداخلية ونوع القيمة المُعادة.

من الأخطاء المتكررة نسيان إعادة دالة التنظيف من useEffect. فبدون التنظيف، يؤدي كل تغيير في القيمة إلى إنشاء مؤقت جديد دون إلغاء المؤقت القديم. والنتيجة أن مؤقتات متعددة تنطلق، مما يؤدي إلى استدعاء setDebouncedValue عدة مرات بقيم قديمة، فيفقد Debounce وظيفته تمامًا.

ثمة بديل يتمثل في تخزين دالة Debounce نفسها داخل useRef باستخدام lodash. وعلى خلاف الأسلوب القائم على الحالة، يطبّق أسلوب ref عملية Debounce على دوال الاستدعاء بدلًا من القيم. استخدم الخطاف القائم على الحالة عندما تحتاج إلى قيمة مشتقة، واستخدم أسلوب دالة الاستدعاء عندما تحتاج إلى تطبيق Debounce على معالج أحداث.

تحقق من عمل الخطاف بإضافة سجل إلى وحدة التحكم داخل دالة الاستدعاء الخاصة بالمؤقت، ثم راقب وحدة تحكم المتصفح أثناء الكتابة بسرعة. ينبغي أن ترى سجلًا واحدًا لكل حدث "توقف"، لا سجلًا لكل ضغطة مفتاح. ويجب أن يكون عدد السجلات أقل بكثير من عدد ضغطات المفاتيح أثناء الكتابة السريعة.

لماذا يجب أن يعيد useEffect في useDebounce دالة تنظيف تستدعي clearTimeout؟

يحتفظ الخطاف useDebounce(value, delay) بحالة مؤجَّلة باستخدام Debounce، ولا تُحدَّث إلا بعد مرور delay من المللي ثانية من الصمت. يضبط useEffect الخاص به مهلة زمنية ويمسحها أثناء التنظيف لإلغاء المؤقتات القديمة. استخدم القيمة المؤجَّلة باستخدام Debounce كتابعية لتأثيرات جلب البيانات من API. أضف معاملًا عامًا في TypeScript لضمان سلامة الأنواع بالكامل.