useEffect(() => {
  // קוד שירוץ אחרי הרינדור
  return () => {
    // ניקוי: ירוץ לפני אפקט הבא או בעת unmount
  };
}, [/* תלותים */]);

const Bad = () => {
  const [value, setValue] = useState(0);
  const sayHello = () => {
    console.log('hello world');
    setValue(value + 1); // יגרום לרינדור נוסף מיד
  };
  sayHello(); // רץ בכל רינדור!
  return <h1>value: {value}</h1>;
};

const Good = () => {
  const [value, setValue] = useState(0);
  useEffect(() => {
    console.log('hello world');
    setValue(v => v + 1); // ירוץ פעם אחת בלבד
  }, []);
  return (
    <div>
      <h1>value: {value}</h1>
      <button className="btn" onClick={() => setValue(v => v + 1)}>click me</button>
    </div>
  );
};

import { useState, useEffect } from 'react';

const UseEffectBasics = () => {
  const [value, setValue] = useState(0);
  const sayHello = () => {
    console.log('hello there');
  };

  sayHello();

  // useEffect(() => {
  //   console.log('hello from useEffect');
  // });

  useEffect(() => {
    console.log('hello from useEffect');
  }, []);
  return (
    <div>
      <h1>value : {value}</h1>
      <button className='btn' onClick={() => setValue(value + 1)}>
        click me
      </button>
    </div>
  );
};
export default UseEffectBasics;

// import Starter from './tutorial/02-useEffect/starter/03-multiple-effects.jsx';

import { useState, useEffect } from 'react';

const MultipleEffects = () => {
  const [value, setValue] = useState(0);
  const [secondValue, setSecondValue] = useState(0);

  useEffect(() => {
    console.log('hello from first useEffect');
  }, [value]);

  useEffect(() => {
    console.log('hello from second useEffect');
  }, [secondValue]);
  return (
    <div>
      <h1>value : {value}</h1>
      <button className='btn' onClick={() => setValue(value + 1)}>
        value
      </button>
      <h1>second value : {secondValue}</h1>
      <button className='btn' onClick={() => setSecondValue(secondValue + 1)}>
        second value
      </button>
    </div>
  );
};
export default MultipleEffects;

useEffect(() => {
  if (!shouldRun) return; // יציאה מוקדמת
  // לוגיקה שרצה רק כש-shouldRun=true
}, [shouldRun]);

useEffect(() => {
  if (count % 2 !== 0) return;
  console.log('even:', count);
}, [count]);

const first = useRef(true);
useEffect(() => {
  if (first.current) { first.current = false; return; }
  // ירוץ רק מהרינדור השני והלאה
}, [value]);

useEffect(() => {
  const onResize = () => console.log('resizing...');
  window.addEventListener('resize', onResize);
  return () => window.removeEventListener('resize', onResize);
}, []);

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

useEffect(() => {
  const ac = new AbortController();
  (async () => {
    try {
      const res = await fetch(url, { signal: ac.signal });
      const json = await res.json();
      setData(json);
    } catch (err) {
      if (err.name !== 'AbortError') console.error(err);
    }
  })();
  return () => ac.abort();
}, [url]);

const [input, setInput] = useState('');
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
  const id = setTimeout(() => setSearchTerm(input), 300);
  return () => clearTimeout(id);
}, [input]);

// מסמן לקומפוננטה שהיא קומפוננטת-לקוח (Client Component) בסביבת Next.js (App Router)
"use client";

// מייבאים שני Hooks מ-React: useState (ניהול מצב) ו-useEffect (הרצת אפקטים אחרי רינדור)
import { useState, useEffect } from "react";

// כתובת ה-API שממנה נשלוף את רשימת משתמשי GitHub (מערך של אובייקטים)
const URL = "https://api.github.com/users";

// הגדרת קומפוננטת React פונקציונלית בשם FetchData וייצוא כברירת מחדל
export default function FetchData() {
  // users: מצב שמחזיק את נתוני המשתמשים (ברירת מחדל: מערך ריק)
  // setUsers: פונקציה לעדכון users
  const [users, setUsers] = useState([]);     // default []

  // loading: דגל טעינה — true עד שהבאת הנתונים מסתיימת
  // setLoading: עדכון דגל הטעינה
  const [loading, setLoading] = useState(true);

  // error: מחרוזת שגיאה לתצוגה אם משהו נכשל
  // setError: עדכון הודעת השגיאה
  const [error, setError] = useState("");

  // useEffect ירוץ אחרי הרינדור הראשון בלבד (בזכות []), כדי לבצע את ה-fetch מה-API
  useEffect(() => {
    // AbortController מאפשר לבטל את בקשת ה-fetch אם הקומפוננטה מתפרקת
    const ctrl = new AbortController();

    // פונקציה אסינכרונית שמבצעת את שליפת הנתונים
    const fetchData = async () => {
      try {
        // fetch לכתובת ה-API; מעבירים signal כדי שנוכל לבטל אם צריך
        const res = await fetch(URL, { signal: ctrl.signal });

        // אם הסטטוס לא תקין (לא 200-299) — נזרוק שגיאה ידנית
        if (!res.ok) throw new Error(`HTTP ${res.status}`);

        // ממירים את ה-Response ל-JSON — צפוי לקבל מערך של משתמשים
        const data = await res.json();

        // שומרים את התוצאה ב-state; זה יגרום לרינדור מחדש עם הנתונים
        setUsers(data); // set users equal to result
      } catch (err) {
        // אם זו לא שגיאת ביטול (AbortError) — נשמור את הודעת השגיאה להצגה
        if (err.name !== "AbortError") setError(String(err.message || err));
      } finally {
        // בכל מקרה (הצלחה/כישלון) — נכבה את מסך הטעינה
        setLoading(false);
      }
    };

    // מפעילים את שליפת הנתונים פעם אחת ברינדור הראשוני
    fetchData();          // runs only on initial render

    // פונקציית ניקוי: אם הקומפוננטה מתנתקת — נבטל את הבקשה כדי למנוע דליפות
    return () => ctrl.abort();
  }, []); // מערך תלות ריק → מריץ את האפקט פעם אחת בלבד

  // תצוגה במהלך טעינה: כותרת + טקסט "loading…"
  if (loading) {
    return (
      <section>
        <h3>github users</h3>
        <p>loading…</p>
      </section>
    );
  }

  // תצוגת שגיאה במקרה של כשל: כותרת + הודעת השגיאה באדום
  if (error) {
    return (
      <section>
        <h3>github users</h3>
        <p style={{ color: "tomato" }}>error: {error}</p>
      </section>
    );
  }

  // תצוגת ברירת המחדל — אחרי שהנתונים נטענו בהצלחה
  return (
    <section>
      {/* כותרת הסקשן */}
      <h3>github users</h3>

      {/* רשימת המשתמשים; listStyle:none כדי להסתיר בולטים; padding:0 לאיפוס */}
      <ul className="users" style={{ listStyle: "none", padding: 0 }}>
        {/* מעבר על המערך users והחזרת <li> לכל משתמש */}
        {users.map((user) => {
          // פירוק מאפייני משתמש: id (מפתח ייחודי), login (שם משתמש),
          // avatar_url (תמונת פרופיל), html_url (קישור לעמוד הפרופיל)
          const { id, login, avatar_url, html_url } = user;

          // אלמנט רשימה לכל משתמש
          return (
            <li
              key={id} // React משתמש במפתח ליעילות ברינדור רשימות
              style={{ display: "flex", gap: 12, margin: "12px 0" }} // פריסה אופקית וריווח
            >
              {/* תמונת אווטאר; ב-Next.js אפשר להחליף ל-next/image עם הגדרת דומיין */}
              <img
                src={avatar_url} // כתובת לתמונת הפרופיל
                alt={login}      // טקסט חלופי נגיש
                width={48}
                height={48}
                style={{ borderRadius: 8 }} // פינות מעוגלות
              />

              {/* פרטי המשתמש: שם + קישור לפרופיל */}
              <div>
                {/* שם המשתמש; margin:0 כדי לשמור על קומפקטיות */}
                <h5 style={{ margin: 0 }}>{login}</h5>

                {/* קישור לפרופיל GitHub; נפתח בטאב חדש; rel לשיקולי אבטחה */}
                <a href={html_url} target="_blank" rel="noreferrer">
                  profile
                </a>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}