setState callback in React hooks

4
1023

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

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

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

בואו נראה..

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

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

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

4 COMMENTS

  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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here