Combining AbortController timeout and unmount cleanup in useEffect fetch

Direct Answer

Use a single AbortController with a local timedOut flag for broad compatibility, or AbortSignal.any([unmountSignal, AbortSignal.timeout(ms)]) when your target runtimes support it. Cleanup ordering does not matter—abort() is idempotent and aborting a settled fetch is a no-op. Distinguish timeout from unmount by checking the flag (or signal.reason with the modern API) before treating the error as a network failure.

Two Practical Patterns

Pattern A: Single Controller with Flag (Works Everywhere)

useEffect(() => {
  const controller = new AbortController();
  let timedOut = false;
  const timer = setTimeout(() => {
    timedOut = true;
    controller.abort();
  }, 5000);

  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      if (!controller.signal.aborted) setData(data);
    })
    .catch(err => {
      if (err.name === 'AbortError') {
        if (timedOut) setError('timeout');
        return; // silent for unmount
      }
      setError('network');
    });

  return () => {
    clearTimeout(timer);
    controller.abort();
  };
}, [url]);

The flag is set inside the timer callback, so a timeout that fires after the response has already resolved cannot flip it spuriously. The cleanup function clears the timer first, then calls abort()—order is irrelevant, but clearing the timer prevents a stale callback from running against a controller you might reuse in a ref.

Pattern B: AbortSignal.any with AbortSignal.timeout (Modern, Cleaner)

useEffect(() => {
  if (typeof AbortSignal.timeout !== 'function' || typeof AbortSignal.any !== 'function') {
    // fall back to Pattern A
    return;
  }
  const unmountController = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const signal = AbortSignal.any([unmountController.signal, timeoutSignal]);

  fetch(url, { signal })
    .then(res => res.json())
    .then(data => {
      if (!signal.aborted) setData(data);
    })
    .catch(err => {
      if (err.name === 'TimeoutError') {
        setError('timeout');
        return;
      }
      if (err.name === 'AbortError') return; // unmount
      setError('network');
    });

  return () => unmountController.abort();
}, [url]);

The composite signal's reason reflects whichever input aborted first, so the catch block sees TimeoutError or AbortError directly—no flag needed. Feature-detect the APIs before relying on them.

Cleanup Ordering

Both clearTimeout(timer) and controller.abort() are safe in either order. abort() on an already-settled fetch does not reject the promise. The only reason to clear the timer is to avoid a stray callback touching a controller that has been reassigned or stored in a ref across effect runs.

Distinguishing the Abort Source

• Flag method: timedOut set in the timer callback, checked in catch before err.name === 'AbortError'.
• Reason method: controller.abort(new DOMException('timeout', 'TimeoutError')) makes signal.reason a TimeoutError; unmount abort leaves it as AbortError. Only works in runtimes that honor abort(reason).
• Composite signal: AbortSignal.any surfaces the reason of the first input to abort.

Verification Checklist

1. Add temporary logging for err.name, err.message, signal.reason in the catch block.
2. Trigger unmount mid-request (navigate away) and confirm silent abort.
3. Point the request at a delayed endpoint (e.g., /delay/10) to force the timeout and verify the retry message appears.
4. Run under React 18 StrictMode in development; the double-invoked request must abort silently with no user-visible error.
5. Let a request resolve, then unmount; verify no stale state update and that clearTimeout ran.

One Diagnostic Detail

What are the exact browser and Node versions you must support? That determines whether Pattern B is viable or you must stick with Pattern A.