Filtering, cancellation, and caching

What you will build

Prevent stale requests from overwriting new results and avoid duplicate fetches.

Understand the idea first

Prevent stale requests from overwriting new results and avoid duplicate fetches.

Build it step by step

let controller;
async function search(query) {
  controller?.abort();
  controller = new AbortController();
  return loadData(`/api/search?q=${encodeURIComponent(query)}`, {
    signal: controller.signal,
  });
}

1. Open the previous project and record its result.
2. Type the example and complete: Search three terms quickly; only the final query may update the UI.
3. Change one input, predict, then verify.
4. Create and repair: Cancellation is not a user-facing failure; handle AbortError separately.

Read the important lines

• Prevent stale requests from overwriting new results and avoid duplicate fetches.
• Read input, processing, and output separately.
• Verify another input and an edge case.

Common mistakes and what to check

Practice without copying

Search three terms quickly; only the final query may update the UI.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases