עצרו Race Conditions באמצעות React AbortControllers

משתמשים נעים מהר באפליקציות ווב. המהירות הזו יוצרת שתי בעיות עיקריות עבור מפתחים.

הבעיה הראשונה היא מלכודת ה-unmounted component. משתמש לוחץ על כפתור כדי לבצע fetch לנתונים. הבקשה לוקחת ארבע שניות. לאחר שתי שניות, המשתמש לוחץ על "חזור" ועוזב את הדף. הבקשה ממשיכה ברקע. כשהנתונים מגיעים, הקוד מנסה לעדכן component שכבר לא קיים. זה גורם לדליפות זיכרון (memory leaks).

הבעיה השנייה היא race condition. זה קורה לעיתים קרובות בשורות חיפוש.

  • משתמש מקליד "A". בקשה 1 מתחילה.
  • משתמש מקליד "AB". בקשה 2 מתחילה.
  • בקשה 2 מסתיימת ראשונה ומציגה את הנתונים הנכונים.
  • בקשה 1 מסתיימת באיחור ומחליפה את המסך בנתונים ישנים.

ניתן לפתור את שתי הבעיות באמצעות ה-AbortController API. כלי זה מאפשר לכם להפסיק בקשת רשת כאשר היא כבר אינה נחוצה.

איך ליישם זאת:

  • צרו AbortController חדש בתוך ה-useEffect שלכם.
  • העבירו את ה-signal של ה-controller לבקשת ה-fetch שלכם.
  • השתמשו בבלוק try/catch כדי לטפל בשגיאה.
  • בדקו אם שם השגיאה הוא AbortError כדי להתעלם מביטולים מכוונים.
  • החזירו cleanup function בתוך ה-useEffect כדי לקרוא ל-controller.abort().

תבנית זו עובדת כאשר component עובר unmount או כאשר תלות (dependency) משתנה.

יתרונות של גישה זו:

  • אתם מונעים מנתונים מיושנים לדרוס נתונים חדשים.
  • אתם מונעים דליפות זיכרון (memory leaks) באפליקציית ה-React שלכם.
  • אתם משחררים חיבורי רשת בדפדפן.
  • האפליקציה שלכם נשארת צפויה ויציבה.

מקור: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899