useEffect and Data Fetching

import { useState, useEffect } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // Cleanup function — runs when component unmounts
    return () => clearInterval(timer);
  }, []);  // Empty array = run once on mount

  return <p>{time.toLocaleTimeString()}</p>;
}

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

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(`/api/users/${userId}`)
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch');
        return res.json();
      })
      .then(data => setUser(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [userId]);  // Re-run when userId changes

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  if (!user) return null;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Run once on mount
useEffect(() => { ... }, []);

// Run when count changes
useEffect(() => { ... }, [count]);

// Run on every render (avoid!)
useEffect(() => { ... });

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = connect(roomId);

    return () => {
      connection.disconnect();  // Cleanup on unmount or roomId change
    };
  }, [roomId]);
}