hardFrontend

How do you safely handle async work and race conditions inside effects?

Q: How do you safely handle async work and race conditions inside effects?

**Core concept (TL;DR).** An effect callback can't be async directly (its return value is the **cleanup**, not a promise), so define an async function *inside* and call it. The real hazard is a **race condition**: if inputs change quickly, an older request can resolve **after** a newer one and overwrite fresh data. Guard with an ignore flag or an AbortController in the cleanup. Discard stale responses on re-run/unmount <text x="70" y="58" fill="#ef4444"

284 views

Understand the problem

Preventing stale updates and leaks from out-of-order async results.

reacteffectsasync

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

Ignore-flag prevents a stale response winning

Run Playground

import { useState, useEffect } from 'react';

// Shorter queries resolve SLOWER, to force an out-of-order race.
function searchApi(q) {
  const delay = Math.max(200, 1200 - q.length * 150);
  return new Promise((res) => setTimeout(() => res(q ? 'Results for: ' + q : '—'), delay));
}

export default function App() {
  const [query, setQuery] = useState('');
  const [result, setResult] = useState('');

  useEffect(() => {
    let active = true;
    searchApi(query).then((r) => { if (active) setResult(r); }); // ignore if superseded
    return () => { active = false; };
  }, [query]);

  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type quickly" />
      <p>{result}</p>
      <p style={{ color: '#666' }}>The cleanup flag stops a slow early request from overwriting newer results.</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are Server Actions and the `"use server"` directive in React 19?

How do you keep the UI responsive during an expensive update without a Suspense fallback flash?