Fetching Data

Fetch inside useEffect

Start the request after mount (or when a dependency changes). Store the result in state.

function Users() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!response.ok) throw new Error("Request failed");
        const data = await response.json();
        if (!cancelled) setUsers(data);
      } catch (err) {
        if (!cancelled) setError(err.message);
      }
    }

    load();
    return () => {
      cancelled = true;
    };
  }, []);

  if (error) return <p>Error: {error}</p>;
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Show loading UI

Add a loading boolean so users know work is in progress.

const [loading, setLoading] = useState(true);
// set false in finally after the request

Handle HTTP errors

fetch only rejects on network failure. Check response.ok yourself.

Practice safely

Use public demo APIs while learning. Never put secret API keys in frontend code.