Fetching Data: Races, Stale Responses, and Cleanup

Required tools

• Node.js (20.x LTS or newer)
• npm (10.x (bundled with Node.js))

Setup

1. Reuse the Vite + React project from the previous lesson's lab (or run `npm create vite@latest course-search -- --template react` for a fresh one).
2. Add the mock API file below as `src/mockApi.js`.
3. Replace `src/App.jsx` with the starter file below.
4. Run `npm run dev` and open the printed local URL.

Project structure

course-search/
  src/
    App.jsx
    mockApi.js
    main.jsx
  package.json

Starter files

const ALL_COURSES = [
  { id: 1, title: "HTML & CSS Fundamentals" },
  { id: 2, title: "JavaScript Fundamentals" },
  { id: 3, title: "TypeScript Foundations" },
  { id: 4, title: "React Application Development" },
];

// Simulates a real network call with a random delay, so responses can
// genuinely arrive out of order -- deliberately, to make the race condition
// this lab guards against reproducible.
export function searchCourses(query) {
  const delayMs = Math.random() * 800;
  const results = ALL_COURSES.filter((c) =>
    c.title.toLowerCase().includes(query.toLowerCase()),
  );
  return new Promise((resolve) => setTimeout(() => resolve(results), delayMs));
}

import { useEffect, useState } from "react";
import { searchCourses } from "./mockApi";

export default function App() {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // TODO: guard against race conditions using a request-token or an
    // "ignore" flag set by the cleanup function, so a slow, stale response
    // can never overwrite a newer, faster one.
    setIsLoading(true);
    searchCourses(query)
      .then((results) => {
        setItems(results);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(String(err));
        setIsLoading(false);
      });
  }, [query]);

  const uiState = isLoading ? "loading" : error ? "error" : items.length === 0 ? "empty" : "success";

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search courses..."
        aria-label="Search courses"
      />
      {uiState === "loading" && <p>Loading...</p>}
      {uiState === "error" && <p role="alert">Something went wrong.</p>}
      {uiState === "empty" && <p>No courses match your search.</p>}
      {uiState === "success" && (
        <ul>
          {items.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Requirements

• Typing quickly never leaves the list showing results for an earlier, now-outdated query
• The effect's cleanup function marks the in-flight request as no longer relevant before the next one starts
• The four UI states (loading, error, empty, success) are all reachable and visually distinct
• No console errors or warnings appear, including no 'state update on an unmounted component' warning

Commands to run

• Start the dev server

  npm run dev

Expected behavior

Typing a query quickly (e.g. 'r' then 'rea' then 'react' within under a second) always ends up showing results for 'react' specifically, never briefly or permanently showing results for 'r' or 'rea', regardless of the random simulated network delay.

Verify it yourself

• Type quickly into the search box: r, then rea, then react, within about a second

  Expected: The final displayed list always matches 'react' -- open the console and confirm no stray state updates after the component would be considered stale

• Clear the search box entirely

  Expected: All four courses are shown (an empty query matches everything via includes(''))

• Type a query that matches nothing, like 'zzz'

  Expected: The empty state message appears, not the error state

Troubleshooting

• Occasionally the wrong, outdated results flash on screen — Confirm the effect's cleanup function actually sets an 'ignore' flag (or checks a request id) that the .then() callback reads before calling setItems -- without it, every in-flight promise still resolves and unconditionally overwrites state.
• React warns about updating state on an unmounted component — The same ignore-flag/request-id guard that fixes race conditions also fixes this -- the cleanup function should prevent the stale .then() callback from calling setState at all once it's no longer relevant.

Extension challenge

Add a 300ms debounce so a fetch only starts after the user pauses typing, rather than on every keystroke -- measure how much it reduces the number of in-flight requests during fast typing.