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

useEffect Hook

בקומפננטה מסוג קלאס קיימים שלושה מחזורי חיים המוחלפים על ידי השימוש בהוק useEffect- componentDidMount componentDidUpdate, ו componentWillUnmount .
היתרון של ה useEffect הוא היכולת לקחת את שלושת מחזורי החיים הנל ולממש אותם באמצעותו.

לדוגמא ניתן לממש בעזרת useEffect:

  •  פנייה לשרת לקבלת מידע(fetch)
  •  שינויים ב- DOM 
  •  subscription

חשוב לשים לב, שכברירת מחדל useEffect ירוץ לאחר כל רנדור של הפונקציה, כולל הרנדור הראשוני(הדבר ניתן לשינוי, ויוסבר בהמשך הפוסט).

ועכשיו קצת קוד.. קומפונטטה מסוג קלאס ומסוג פונקציה עם  counter שמעדכנן את כותרת הדף(document title) מיד לאחר שריאקט מבצעת את השינויים ב- DOM. בהקשר זה יש לשים לב, לשכפול הקוד בקלאס בשני מחזורי החיים.
המצב האופטימלי הינו שזה יקרה אחרי כל רנדור – אך מחזור חיים כזה אינו קיים בקלאס.
useEffect מגדיר לריאקט שהקומפוננטה צריכה לבצע את שכתבנו בתוכה לאחר הרנדור. ריאקט זוכרת את הפונקציה שנכתבה ותקרא לה לאחר שתסיים לעשות את כל השינויים ב DOM.

קומפננטה מסוג קלאס

קומפוננטה מסוג פונקציה עם useEffect

מתי useEffect ירוץ?

כפי שכתבתי כבר, ברירת המחדל של useEffect היא לרוץ ברנדור הראשוני ובכל פעם שהקומפוננטה מתרנדרת. useEffect יודע לקבל משתנה שני מסוג מערך,מערך זה יקבע מתי useEffect יתעדכן(המקביל ל- componentDidUpdate). במידה ויש צורך ש useEffect ירוץ רק ב- on mount נעביר מערך ריק. 

דוגמא למצב שנרצה ש useEffect ירוץ רק פעם אחת היא כאשר נרצה לקרוא ל API רק שהקומפוננטה נטענת

במידה ויושם ערך בתוך המערך אז useEffect ירוץ בכל פעם שיהיה שינוי בערך המשתנה, כפי שניתן לראות בדוגמה המוצגת.

תהיו הראשונים לדעת!

הרשמו לניוזלטר שלנו וקבלו התראות על מאמרים חדשים ישירות למייל

איך נשתמש ב componentWillUnmount?

ישנם מספר מקרים הדורשים ניקוי המונע דליפות זיכרון. (memory leak)
לדוגמא פניות API , הפסקה של אינטרוולים וכו..


subscription של קומפוננטה ללא הוקס:

בכדי להריץ משהו לפני שהקומפוננטה unMount יש צורך בהחזרת פונקציה מתוך useEffect.

כעת נבחן את אותה הדוגמא תוך שימוש בהוקס.

useEffect מאפשר הן ניהול של componentDidMount componentDidUpdate, ו componentWillUnmount ללא שימוש בקומפוננטה מסוג קלאס והן שימוש חוזר ושיתוף הלוגיקה.

לסיכום, לפני תחילת העבודה עם useEffect חשוב לשים לב:

  • מתי וכיצד ריאקט מבצע את useEfeect.
  • כיצד להחליט מתי useEfeect ירוץ.
  • כיצד לנקות דליפות זכרון כאשר עושים unmounting לקומפוננטה.

useContext

useContext מספק לנו את כל הפונקציונליות שיש לנו ב- Context API
רק בתור הוק שבו ניתן להשתמש בתוך קומפוננטות מסוג פונקציה.

useContext הוא הוק חדש שמאפשר לנו לצרוך מידע מ React.createContext
useContext מקבל אובייקט של context(הערך שחוזר מ – React.createContext ) ומחזיר את הערך הנוכחי של האובייקט
בדוגמא הבאה מוצג אופן השימוש בו.

בסרטון המצורף תוכלו לראות בצורה ויזואלית איך לקחו קלאס והפכו אותו להוקס. כמה הקוד התקצר ואיך הלוגיקה מנוהלת במקום אחד.

בפוסט זה עסקנו בהוקס הבסיסיים והמשמעותיים יותר אבל יש עוד הוקס שכדאי להכיר

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

אם אהבתם את המאמר אשמח אם תשתפו/תמליצו ​​לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.

5 Responses

      1. היי אסף אני לא חושב שהייתי הולך על if.
        אלא על הוספה של המשתנה אותו אני רוצה לבדוק במערך התלויות של useEffect
        ובבדיקה האם זה רנדור ראשוני. אם זה לא רנדור ראשוני והמשתנה אכן השתנה אני אכנס ל effect
        מוזמן לקרוא את הפוסט הבא https://www.react-israel.co.il/setstate-callback-in-react-hooks/
        או לראות רק את הדוגמת קוד https://gist.github.com/roeib/f5b5788e9f4c9c142af42ae66fb0b654#file-setstate4-js

  1. היי רועי,
    תודה על כל ההסברים! מעולה ממש
    אשמח אם תוכל בבקשה להסביר גם על ה hooks
    useCallback
    useMemo
    useRef

    תודה

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *