// src/App.jsx
import { useEffect, useState } from "react";

// Simulates a slow network so the race condition is actually visible.
function fakeFetchUser(id) {
  const delay = id === "1" ? 1500 : 200; // id "1" resolves much slower
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id, name: `User ${id}` }), delay);
  });
}

function UserDisplay({ userId }) {
  const [user, setUser] = useState(null);

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

    async function loadUser() {
      const data = await fakeFetchUser(userId);
      if (!ignore) {
        setUser(data);
      }
    }

    loadUser();
    return () => {
      ignore = true;
    };
  }, [userId]);

  return <p>{user ? user.name : "Loading..."}</p>;
}

function App() {
  const [userId, setUserId] = useState("1");

  return (
    <div>
      <button onClick={() => setUserId("1")}>Show User 1 (slow)</button>
      <button onClick={() => setUserId("2")}>Show User 2 (fast)</button>
      <UserDisplay userId={userId} />
    </div>
  );
}

export default App;

/*
  Notes:
  - Clicking "User 1" then quickly "User 2" demonstrates the race:
    User 1's slow request is still in flight when User 2's fast one
    resolves first and correctly shows "User 2."
  - Without the ignore flag, User 1's slow response would arrive
    later and incorrectly overwrite the screen back to "User 1" even
    though userId is "2" by then. The cleanup function sets ignore to
    true on the old effect before the new one starts, preventing that.
*/