How to Handle Race Conditions in Hooks

Prevent bugs where an earlier network request finishes after a later one, showing the wrong data.

The Scenario

User clicks "User A". Request A starts.
User clicks "User B". Request B starts.
Request B finishes (shows User B).
Request A finishes (overwrites with User A).
Result: User sees "User B" selected but "User A" content.

The Fix: Boolean Flag

      
typescript

useEffect(() => {
  let active = true;

  fetchData(id).then(data => {
    if (active) {
      setData(data);
    }
  });

  return () => {
    active = false;
  };
}, [id]);

When id changes, the cleanup function runs, setting active = false for the previous effect closure. When the old request returns, the if (active) check fails, and the data is ignored.