לברוח מהמלכודת: תיקון Stale Closures ב-React Hooks
Stale closures גורמים לאובדן נתונים שקט ב-React.
אתם בונים דאשבורד עם טיימר שרץ ברקע. אתם משתמשים ב-setInterval בתוך הוק useEffect כדי לשמור נתונים באופן אוטומטי כל 5 שניות.
הבאג קורה כשהאינטרוול פועל. הוא שומר מסמך ריק גם אם המשתמש הקליד עמוד שלם. האינטרוול נשאר תקוע בעבר; הוא משתמש בגרסה ישנה של ה-state שלכם.
הבעיה
כש-useEffect רץ, הוא לוכד (captures) את המשתנים שנמצאים בטווח ההקשר (scope) שלו.
- אם תשאירו את ה-state מחוץ למערך התלויות (dependency array), האינטרוול ישתמש ב-state מהרינדור הראשון.
- אם תוסיפו את ה-state למערך התלויות, React יפעיל מחדש את האינטרוול בכל הקשה על המקלדת. זה פוגע בביצועים ומשבש את התזמון שלכם.
הפתרון: תבנית ה-Mutable Ref
עליכם להפריד בין הטיימר לבין הנתונים. השתמשו ב-hook מסוג useRef כדי לשמור רפרנס (reference) קבוע ל-state העדכני ביותר שלכם. זה מונע רינדורים מחדש ושומר על האינטרוול יציב.
איך ליישם זאת:
- צרו ref שיחזיק את ה-state העדכני ביותר שלכם.
- השתמשו ב-
useEffectכדי לעדכן את ה-ref הזה בכל פעם שה-state שלכם משתנה. - התחילו את האינטרוול עם מערך תלויות ריק כדי שהוא ירוץ רק פעם אחת.
- גשו ל-ref בתוך ה-callback של האינטרוול.
השיטה הזו מבטיחה שהמשימות שלכם ברקע תמיד ישתמשו בנתונים טריים. היא שומרת על ה-UI מהיר ועל הנתונים שלכם בטוחים.
מקור: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7