Avoid Stale State and Race Conditions in React useEffect – Interview‑Ready Tips

Problem Overview

In many news‑type pages developers switch between channels (e.g., Tech, Finance, Sports) and fetch data with a useEffect hook. The naïve implementation works at first glance, but rapid switching, network latency, or component unmount can cause incorrect UI, memory‑leak warnings, and hidden bugs—key topics in front‑end interviews.

Original Code and Its Shortcomings

useEffect(() => {
  async function fetchData() {
    const response = await fetch(url);
    const data = await response.json();
    setData(data);
  }
  fetchData();
}, [url]);

The code is syntactically correct and updates state after a successful fetch, but it ignores three essential engineering concerns:

Updating state after the component has been unmounted.

Race conditions when multiple requests are in flight.

Absence of error handling or loading feedback.

Component Unmount & Memory‑Leak Warning

If a user navigates away before the request finishes, React logs

Can not perform a React state update on an unmounted component

. This demonstrates that the effect’s side‑effect can outlive the component, so a cleanup function is required to cancel or ignore late callbacks.

Request Race Condition

When the url dependency changes quickly, several fetches may run concurrently. For example, a slow request to /api/userA (2 s) followed by a fast request to /api/userB (0.5 s) will cause the UI to first show user B, then be overwritten by user A after it finally returns—an “stale response” or “overwritten data” problem that interviewers love to probe.

Lack of Error Handling

The snippet has no try/catch, no error state, and no loading indicator. In real‑world apps this leads to silent failures, white‑screen experiences, and makes debugging difficult.

Improved, Interview‑Ready Solution

useEffect(() => {
  let cancelled = false;
  async function fetchData() {
    try {
      const response = await fetch(url);
      const data = await response.json();
      if (!cancelled) {
        setData(data);
      }
    } catch (err) {
      if (!cancelled) {
        setError(err);
      }
    }
  }
  fetchData();
  return () => {
    cancelled = true; // cleanup flag
  };
}, [url]);

This version introduces a cancelled flag that the cleanup function sets when the component unmounts, preventing state updates after unmount and avoiding stale‑response overwrites. It also wraps the fetch in try/catch to surface errors and can be extended with loading state. Modern alternatives include AbortController, debouncing, or retry mechanisms, but the core idea remains: manage the full lifecycle of asynchronous side‑effects.

Takeaway for Interviewers

Beyond knowing that useEffect handles side‑effects, interviewers expect candidates to discuss the effect’s cleanup, race‑condition mitigation, and robust error handling—demonstrating true engineering mindset rather than rote API memorization.