מדריך ריאקט – react hooks | useEffect

הוק חשוב מאד במימוש functional components הוא useEffect , מי שמכיר עבודה עם קלאסים בריאקט מכיר את המטודות של לייף סייקל למשל componentDidMount.

מה עושים עם useEffect?

useEffect מנהלת את ה side effects של הקומפוננטה. כמה שימושים נפוצים ואך עיקריים עם useEffect הם שאפשרות הרצה של קוד ברגע שיש שינוי כל כשלהו של מידע ברכיב, הרצה של קוד כשהרכיב עולה לDOM או לחילופין שהרכיב עוזב את הDOM. להלן דוגמה של שימוש ב useEffect :

import React, { useState ,useEffect } from 'react';

function CountCrocs() {
  // Declare a new state variable, which we'll call "count"
  const [totalCrocs, addCrocs] = useState(0);
	useEffect(()=>{
    document.title =`You have got ${totalCrocs} crocs`;
      return ()=>{
      console.log('there is no more crocs');
      }
    },[]);
  return (
    <div>
      <p>תנינים ברשת {count} יש לך </p>
      <button onClick={() => addCrocs(totalCrocs + 1)}>
        תפוס תנין
      </button>
    </div>
  );
}

שימוש עיקרי המתואר פה מאפשר לנו כמה שימושים חיוניים, למשל:

• ראשית , הקוד שנמצא בתוך useEffect ירוץ פעם אחת לאחר שהרכיב נטען, במידה בהוספנו בקצהו מערך רייק, ראו שורה 8, שכן מאוכלסת עם משתנה , כלומר הקוד שבתוך useEffect ירוץ כל שינוי שיהיה ב totalCrocs. במידה והוספתי משתנים נוספים הקוד ירוץ במידה ויהיה שינוי באחד ממשתנים אלו.
• בהמשך לסעיף הקודם, במידה ולא נוסיף מערך כלל, הקוד שבתוך useEffect ירוץ בכל שינוי ברכיב.
• useEffect משמש אותנו בחלק גדול מאד מהמקרים לבצע fetch . בתוך useEffect תוכלו לנהל פונקיות אסינכרוניות.
• return – של useEffect מאפשר לנו להריץ קוד כשהפונקציה עוזבת את הDOM .

קיימת האפשרות להשתמש בכמה useEffect באותו רכיב למשל במקרה שתרצו לעדכן רכיב לפי משתנה מסויים וכן שיופיע return באפליקציה ולא תרצו שהוא ירוץ כל פעם גם כן , תוכלו להשתמש בשיטה הבאה:

import React, { useState ,useEffect } from 'react';

function CountCrocs() {
  // Declare a new state variable, which we'll call "count"
  const [totalCrocs, addCrocs] = useState(0);
	useEffect(()=>{
    document.title =`You have got ${totalCrocs} crocs`;
    },[totalCrocs]);
  
  useEffect(()=>{
     return ()=>{
      console.log('there is no more crocs');
      }
    },[]);
  return (
    <div>
      <p>תנינים ברשת {count} יש לך </p>
      <button onClick={() => addCrocs(totalCrocs + 1)}>
        תפוס תנין
      </button>
    </div>
  );
}

לסיכום useEffect

יש האומרים ש useEffect הוא ה HOOK הכי חשוב מבין כל ההוקים , וכן סביר להניח שכמעט כל רכיב שלכם יעשה שימוש ב useEffect (רכיבים שמנהלים דטה כמובן) . נמשיך במדריך HOOKS לפוסט הבא והפעם : useContext

פוסטים קשורים:

מדריך ריאקט – react hooks | useState מדריך ריאקט – classes, functional component & hooks מדריך react | ריאקט | איך מעבירים מידע בין קומפננטות באמצעות props בעיות נפוצות ב-react | קינפוג עם sass