Software DevelopmentAdvanced 3 to 4 hours

Race Condition in Async Data Fetching

Fix a tricky race condition where stale network responses overwrite fresh data.

The Scenario

A search input fetches autocomplete results as the user types. However, sometimes the results of an older, slower query overwrite the results of a newer, faster query, resulting in the UI showing the wrong suggestions.

The Brief

Diagnose the async race condition in the provided autocomplete component. Fix it by implementing request cancellation using the `AbortController` API. Explain why boolean flags (like `isMounted`) are inferior to true request cancellation.

Deliverables

  • The corrected component utilizing `AbortController`
  • An explanation of the race condition mechanism (how slower requests overtake faster ones)
  • A brief defense of `AbortController` versus simple boolean flag checks

Submission Guidance

This tests your understanding of asynchronous JavaScript behavior. Simply debouncing the input is not a complete fix; the race condition must be fundamentally solved.

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.

This appears on your public Badge.

0/20000 charactersMarkdown supported

One per line or comma separated. Up to 5 links.

By submitting, you agree your submission text, name, and evaluation will appear on a public Badge URL.