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