useDebounce خطّاف تأخير التنفيذ

آخر تحديث: 2026-11-03

useDebounce خطّاف تأخير التنفيذ

يأخذ useDebounce قيمة تتغيّر بسرعة، مثل نص مربع بحث، ويعيد نسخة ثابتة منها بعد N مللي ثانية فقط: فإذا تغيّرت القيمة مجدداً في الأثناء، انطلق المؤقّت من جديد. وقد يقود طلباتك بها فيختفي كم كبير من العمل بلا داعٍ، وهو ما يجعله عنصراً أساسياً في البحث والتكمال التلقائي ومعالجة تغيير الحجم. والقيمة التي يعيدها متأخّرة عن قصد، وهذا التأخّر هو ما يستبعد ضغطات المفاتيح الوسيطة تماماً.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value)
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(t)   // تغيّرت القيمة مجدداً: ألغِ المؤقّت القديم
  }, [value, delay])
  return debounced
}

⚙️ المعاملات

القيمة المرجعة：يعيد القيمة المؤخّرة الثابتة: تبقى كما هي ما دامت القيمة الخام تتغيّر، ولا تلحق بها إلا بعد توقّف.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

أثناء كتابتك بسرعة يبقى سطر «Debounced» ثابتاً ولا يلحق بك إلا بعد نصف ثانية من توقفك — فالطلب الذي يقوده هذه القيمة ينطلق مرة واحدة، بالقيمة النهائية.

💡 النقاط الأساسية

🏷️ المزيد من أنماط المكونات

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن