How would you fetch data safely inside useEffect while avoiding a common bug called a race condition?

A race condition can happen when a component fetches data, the dependency changes again quickly, and an older, slower request finishes after a newer one, showing outdated results by mistake. You fix this by tracking whether the effect is still the current one, usually with a simple flag inside the cleanup function, and ignoring outdated results.

useEffect(() => {
  let isCurrent = true;
  fetchResults(query).then((data) => {
    if (isCurrent) setResults(data);
  });
  return () => { isCurrent = false; };
}, [query]);