03. useEffect i cykl życia

// Uruchamia się przy KAŻDYM renderze (rzadko potrzebne)
useEffect(() => {
  console.log('Każdy render');
});

// Uruchamia się TYLKO RAZ po mount
useEffect(() => {
  console.log('Mount — tylko raz');
}, []);

// Uruchamia się gdy zmieni się userId
useEffect(() => {
  console.log('userId się zmieniło:', userId);
}, [userId]);

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`, {
          signal: controller.signal,
        });
        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchUser();

    // Cleanup: anuluj fetch jeśli userId się zmieni lub komponent odmontuje
    return () => controller.abort();
  }, [userId]);

  if (loading) return <p>Ładowanie...</p>;
  if (error) return <p>Błąd: {error}</p>;
  return <p>Użytkownik: {user?.name}</p>;
}

// ŹLE: setState na odmontowanym komponencie
useEffect(() => {
  const interval = setInterval(() => {
    setCount(c => c + 1); // Błąd jeśli komponent jest odmontowany!
  }, 1000);
  // Brak cleanup — timer działa w tle bez końca
}, []);

// DOBRZE: cleanup czyści timer
useEffect(() => {
  const interval = setInterval(() => {
    setCount(c => c + 1);
  }, 1000);

  return () => clearInterval(interval); // Zatrzymaj timer przy odmontowaniu
}, []);