أوقف حالات التسابق (Race Conditions) باستخدام React AbortController

يتحرك المستخدمون بسرعة في تطبيقات الويب. وتخلق هذه السرعة مشكلتين رئيسيتين للمطورين.

المشكلة الأولى هي فخ المكونات غير المثبتة (unmounted component trap). ينقر المستخدم على زر لجلب البيانات. يستغرق الطلب أربع ثوانٍ. بعد ثانيتين، ينقر المستخدم على زر الرجوع ويغادر الصفحة. يستمر الطلب في الخلفية. وعند وصول البيانات، يحاول الكود تحديث مكون لم يعد موجودًا، مما يتسبب في تسريبات الذاكرة (memory leaks).

المشكلة الثانية هي حالة التسابق (race condition). يحدث هذا غالبًا في أشرطة البحث.

  • يكتب المستخدم "A". يبدأ الطلب 1.
  • يكتب المستخدم "AB". يبدأ الطلب 2.
  • ينتهي الطلب 2 أولاً ويعرض البيانات الصحيحة.
  • ينتهي الطلب 1 متأخرًا ويقوم باستبدال الشاشة ببيانات قديمة.

يمكنك حل كلتا المشكلتين باستخدام AbortController API. تتيح لك هذه الأداة إيقاف طلب الشبكة عندما لا يعود هناك حاجة إليه.

كيفية التنفيذ:

  • أنشئ AbortController جديدًا داخل useEffect.
  • مرر إشارة المتحكم (controller signal) إلى طلب fetch الخاص بك.
  • استخدم كتلة try/catch لمعالجة الخطأ.
  • تحقق مما إذا كان اسم الخطأ هو AbortError لتجاهل عمليات الإلغاء المتعمدة.
  • قم بإرجاع دالة تنظيف (cleanup function) في useEffect لاستدعاء controller.abort().

يعمل هذا النمط عندما يتم إلغاء تثبيت المكون (unmount) أو عندما تتغير التبعية (dependency).

فوائد هذا النهج:

  • تمنع البيانات القديمة من استبدال البيانات الجديدة.
  • تمنع تسريبات الذاكرة في تطبيق React الخاص بك.
  • توفر اتصالات الشبكة في المتصفح.
  • يظل تطبيقك قابلاً للتنبؤ ومستقرًا.

المصدر: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899