اقتراحات غير متزامنة مع Debounce

بدلًا من تصفية مصفوفة محلية، استدعِ نقطة نهاية API تُرجع الاقتراحات المطابقة استنادًا إلى الاستعلام. يوضع استدعاء API داخل useEffect يعتمد على قيمة الإدخال بعد تطبيق debounce. ينقل ذلك مسؤولية التصفية إلى الخادم، مما يتيح المطابقة التقريبية والترتيب وتقديم اقتراحات من مجموعة بيانات أكبر بكثير.

أضف متغيري حالة جديدين إلى الإكمال التلقائي: isLoading (قيمة منطقية) لعرض مؤشر تحميل أثناء تنفيذ عملية الجلب، وerror (سلسلة نصية أو null) لعرض رسالة خطأ عند فشل الجلب. يتيح هذان المتغيران للمستخدمين معرفة ما يحدث في العملية غير المتزامنة، بدلًا من تركهم يتساءلون عن سبب عدم ظهور الاقتراحات.

في useEffect الخاص بالجلب، استدعِ setIsLoading(true) وsetError(null) في البداية، ثم نفّذ fetch(url) وحلّل JSON واستدعِ setSuggestions(data)، وأخيرًا استدعِ setIsLoading(false) داخل كتلة finally أو بعد مساري النجاح والخطأ كليهما. يجب أن تحتوي مصفوفة تبعيات التأثير على debouncedInputValue فقط.

أنشئ AbortController جديدًا في أعلى التأثير، ومرّر controller.signal إلى خيارات الجلب. في دالة التنظيف، استدعِ controller.abort(). عندما يكتب المستخدم وتتغير القيمة بعد تطبيق debounce، يُلغى طلب الجلب السابق قبل بدء الطلب الجديد، مما يمنع وصول النتائج القديمة بترتيب غير صحيح.

عند إلغاء عملية جلب، تُرفض العملية مع DOMException يحمل الاسم AbortError. في كتلة catch، تحقّق من if (err.name === 'AbortError') return; لتجاهل عمليات الجلب الملغاة بصمت. تعامل فقط مع أخطاء الشبكة الفعلية أو أخطاء API التي ينبغي عرضها للمستخدم.

عيّن قيمة isLoading إلى true قبل الجلب، وإلى false بعد نجاحه أو فشله. استخدم كتلة finally لضمان إعادة ضبط القيمة دائمًا: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). من دون كتلة finally، سيؤدي فشل الجلب إلى استمرار ظهور مؤشر التحميل إلى الأبد.

عندما تكون قيمة isLoading هي true ويحتوي حقل الإدخال على نص، اعرض القائمة المنسدلة وبداخلها مؤشر تحميل في المنتصف بدلًا من قائمة الاقتراحات. يخبر ذلك المستخدم بأن النتائج في طريقها إليه. بعد أن تصبح قيمة التحميل false وتصل الاقتراحات، استبدل مؤشر التحميل بعناصر الاقتراحات الفعلية.

عندما لا تكون قيمة error هي null، اعرض القائمة المنسدلة وبداخلها رسالة الخطأ بدلًا من الاقتراحات. وتُعد رسالة مثل "تعذر تحميل الاقتراحات. يُرجى المحاولة مرة أخرى." أكثر لطفًا من عرض سلسلة الخطأ الخام. ويمكنك اختياريًا إضافة زر لإعادة المحاولة يعيد تشغيل الجلب يدويًا.

تجنّب الجلب عند وجود سلاسل فارغة أو استعلامات قصيرة جدًا تنتج عددًا كبيرًا من النتائج غير الملائمة. أضف شرطًا في بداية التأثير: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. يقلل ذلك من استدعاءات API غير الضرورية ويمنع ظهور قائمة هائلة من النتائج عند إدخال حرف واحد.

خزّن النتائج التي تم جلبها في Map داخل useRef: const cache = useRef(new Map()). قبل الجلب، تحقّق من if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. وبعد نجاح الجلب، خزّن النتيجة. يلغي ذلك طلبات الشبكة المتكررة للاستعلامات التي سبق للمستخدم إدخالها.

بالنسبة إلى الإكمال التلقائي تحديدًا، تُعد فترة debounce التي تتراوح بين 200 و300 مللي ثانية الأنسب. تؤدي الفترات الأقصر (أقل من 200 مللي ثانية) إلى تشغيل عدد كبير جدًا من الطلبات لدى المستخدمين الذين يكتبون بسرعة. أما الفترات الأطول (أكثر من 400 مللي ثانية) فتجعل الاقتراحات تبدو بطيئة وغير مستجيبة. وتُستخدم مدة 250 مللي ثانية افتراضيًا بشكل شائع في تطبيقات الإكمال التلقائي المخصصة للإنتاج.

لماذا يُعد AbortController مهمًا في الإكمال التلقائي الذي يستخدم debounce لجلب البيانات من API؟

استبدل التصفية الثابتة بجلب من API داخل useEffect يعتمد على القيمة بعد تطبيق debounce. استخدم AbortController لإلغاء الطلبات القديمة. أضف حالتي isLoading وerror لتزويد المستخدم بمعلومات عن العملية. عيّن حدًا أدنى لعدد الأحرف لتجنب الاستدعاءات المفرطة. وخزّن النتائج مؤقتًا في مرجع لتجاوز طلبات الشبكة المتكررة.