בכל גודל של אפליקציה ככל הנראה אנחנו ננהל state כלשהו.כאשר אנחנו מנהלים state בקומפוננטה מסוג קלאס ונרצה לעשות שינוי ב state שלנו אנחנו נעשה שימוש ב-setState על מנת לשנות את הערכים הדיפולטיביים שהגדרנו.
מכיוון ש-JS היא סינכרונית ו- setState היא פעולה אסינכרונית נוצר איזשהו פער שבו אנחנו לא יכולים להסתמך על זה שה-state שלנו באמת השתנה.אז איך בכל זאת נוכל לדעת? אז ככה, אנחנו יכולים להעביר ל-setState קריאת callback שבה נוכל לקבל את ה- state המעודכן.
עד כאן הכל טוב ויפה 🙂 אבל מה קורה בהוקס? האם יש לנו built-in callback ל- useState? אז לא, אין לנו.
אז מה נעשה אם נרצה להסתמך על שינוי שכרגע עשינו ב-state?
בואו נראה..
מי שיש לו קצת ניסיון עם הוקס ישים לב שאנחנו מריצים את זה גם בפעם הראשונה שהקומפוננטה מתרנדרת וזה לא המצב הרצוי. אנחנו רוצים לדעת רק ש-counter משתנה. על מנת למנוע את המצב הזה נוסיף נשתמש ב -useRef
ונשמור בתוכו משתמש בוליאני שדרכו נדע האם זהו הפעם הראשונה ש-useeffect רץ.
כעת בכל לחיצה על הכפתור(שבעצם יוצר את השינוי בstate של ה-counter)אנחנו יכולים להריץ קוד מסויים שנרצה ולדעת בבטחון שהשינוי ב-state נעשה כבר. השיטה הזאת פחות נחה לדעתי מה-callback המובנה שיש לנו בקלאסים אבל זה מה יש ועם זה ננצח 🙂
אם יש לכם דרכים נוספות/הערות/ או סתם מילה טובה תרגישו חופשי לרשום בתגובות מתחת או לשלוח לי בלינקדין
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים.
5 Responses
Thanks, I actually randomly went into here, but it helped me think of a solution for some stupid issue in our system.
Respect!
thanks 🙂
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!
לא הבנתי את התגובה ככ איפה אתה רואה שיש בדיקה שזה שווה ל0?
יש לי לדוג' 5 פונקציות באותו שם אך עם מספר שונה לדוג' setCount1, stCount2 וכו' איך אני קוראת לפונקציה זו מתוך פונקציה שמקבלת את המספר ולפי זה ארצה לגשת לפונקציה המתאימה?