useEffect - Side Effects, Cleanup ו-Dependency Array

useEffect הוא אחד ה-hooks שהכי הרבה נכתב עליו, הכי הרבה מתבלבלים ממנו, והכי הרבה משתמשים בו לא נכון. חלק מהבלבול נובע מהשם עצמו - "effect" - שנראה מעורפל. בפרקטיקה, useEffect הוא מנגנון לסנכרון component עם עולם חיצוני. כל פעם שה-component צריך "לדבר" עם משהו מחוץ לReact - localStorage, API, browser APIs, subscriptions - זה המקום של useEffect.

הדרך הכי טובה לחשוב על useEffect היא לא "מה קורה אחרי render" אלא "מה צריך להיות בסנכרון עם ה-state הנוכחי". אם ה-component מציג userId 42, ה-effect דואג שה-user data יהיה טעונה ל-42. אם userId משתנה ל-17, ה-cleanup מבטל את הבקשה הקודמת וה-effect טוען מחדש ל-17. המודל הזה - סנכרון ולא lifecycle - הוא הדרך שה-React team עצמה מגדירה useEffect מאז React 18.

כל אחד שלמד React לבד עשה בשלב מסוים את הטעות הבאה:

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  // ❌ לא לעשות - fetch ישירות בrender
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(data => setUser(data)); // מפעיל re-render → fetch שוב → loop אינסופי

  return <div>{user?.name}</div>;
}

React render functions חייבות להיות pure - אין side effects. Fetch הוא side effect. useEffect הוא הדרך הנכונה לטפל בזה.