تكرار السؤال: …
الإجابة المختصرة
نصمم Hook يستقبل القيمة ومدة التأخير، ويستخدم useState للقيمة المؤجلة مع useEffect يحتوي على setTimeout لإطلاق التحديث ودالة cleanup تقوم بـ clearTimeout.
الشرح
يعمل Hook التهدئة (Debounce) على تجميع التغييرات المتكررة وتأجيل تنفيذها حتى يستقر التفاعل لفترة زمنية محددة. بفضل آلية الـ cleanup في useEffect، يتم إلغاء الـ timer السابق في كل مرة تتغير فيها القيمة قبل انقضاء المهلة.
مثال بالكود
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}أخطاء شائعة
- عدم توفير دالة تنظيف للـ timeout مما يسبب تشغيل استدعاءات متأخرة متراكبة.
أسئلة متابعة
- كيف تبني Custom Hook لإدارة استهلاك الـ LocalStorage مع دعم التزامن بين النوافذ؟
- كيف تبني Custom Hook للـ Infinite Scroll باستخدام IntersectionObserver؟