Code Quiz

Data Fetching Race Condition

A custom fetch hook drops its cleanup guard, letting stale async responses overwrite fresh ones during rapid prop changes.

Codejavascript

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

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

    async function load() {
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
    }

    load();

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

  return user;
}

This hook can display the wrong user after rapid userId changes. What is the bug?

Next →Effect Race Conditions & Cleanup