setState callback in React hooks

5
1209

בכל גודל של אפליקציה ככל הנראה אנחנו ננהל state כלשהו.כאשר אנחנו מנהלים state בקומפוננטה מסוג קלאס ונרצה לעשות שינוי ב state שלנו אנחנו נעשה שימוש ב-setState על מנת לשנות את הערכים הדיפולטיביים שהגדרנו.

מכיוון ש-JS היא סינכרונית ו- setState היא פעולה אסינכרונית נוצר איזשהו פער שבו אנחנו לא יכולים להסתמך על זה שה-state שלנו באמת השתנה.אז איך בכל זאת נוכל לדעת? אז ככה, אנחנו יכולים להעביר ל-setState קריאת callback שבה נוכל לקבל את ה- state המעודכן.

עד כאן הכל טוב ויפה 🙂 אבל מה קורה בהוקס? האם יש לנו built-in callback ל- useState? אז לא, אין לנו.
אז מה נעשה אם נרצה להסתמך על שינוי שכרגע עשינו ב-state?

בואו נראה..

מי שיש לו קצת ניסיון עם הוקס ישים לב שאנחנו מריצים את זה גם בפעם הראשונה שהקומפוננטה מתרנדרת וזה לא המצב הרצוי. אנחנו רוצים לדעת רק ש-counter  משתנה. על מנת למנוע את המצב הזה נוסיף נשתמש ב -useRef
 ונשמור בתוכו משתמש בוליאני שדרכו נדע האם זהו הפעם הראשונה ש-useeffect רץ.

כעת בכל לחיצה על הכפתור(שבעצם יוצר את השינוי בstate של ה-counter)אנחנו יכולים להריץ קוד מסויים שנרצה ולדעת בבטחון שהשינוי ב-state נעשה כבר. השיטה הזאת פחות נחה לדעתי מה-callback המובנה שיש לנו בקלאסים אבל זה מה יש ועם זה ננצח 🙂

אם יש לכם דרכים נוספות/הערות/ או סתם מילה טובה תרגישו חופשי לרשום בתגובות מתחת או לשלוח לי בלינקדין
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים.

5 תגובות

  1. Thank you for this article.
    Is it better (performance wise) to call UseRef And check for current instead of simple if (count === 0) return ?

    Thank you!

  2. יש לי לדוג' 5 פונקציות באותו שם אך עם מספר שונה לדוג' setCount1, stCount2 וכו' איך אני קוראת לפונקציה זו מתוך פונקציה שמקבלת את המספר ולפי זה ארצה לגשת לפונקציה המתאימה?

השאר תגובה

Please enter your comment!
Please enter your name here