Stop an old search response from replacing the new result.

The request that finishes last is not always the one you want.

Imagine a search for “old”, followed by a search for “new”. The newer request finishes first and the screen shows its results. The older request then finishes and overwrites them. The input and the displayed results now disagree.

In the original hook, both callbacks call setState unconditionally. Nothing connects a response to the Effect that is still relevant. The same problem can replace a valid result with an error, or bring results back after the user clears the field.

1. Start the old request.
2. Change the query and complete the new request.
3. Complete or reject the old request.
4. Check that the displayed state still belongs to the new query.

The corrected hook

Here, load(query) returns a promise. This is the complete corrected source from the downloadable example.

import { useEffect, useState } from 'react';

// A deliberately seeded internal example, not customer code.
export function useSearch(query, load) {
  const [state, setState] = useState({ phase: 'idle', data: null, error: null });
  useEffect(() => {
    if (!query) {
      setState({ phase: 'idle', data: null, error: null });
      return;
    }
    let current = true;
    setState({ phase: 'loading', data: null, error: null });
    load(query).then(
      data => {
        if (current) setState({ phase: 'ready', data, error: null });
      },
      () => {
        if (current) setState({ phase: 'error', data: null, error: 'Unable to load results' });
      },
    );
    return () => { current = false; };
  }, [query, load]);
  return state;
}

Each Effect invocation gets a separate current variable. React runs the previous cleanup before setting up an Effect with changed dependencies, and also on unmount. Once cleanup sets that invocation’s flag to false, its callbacks cannot update this state. React documents the same cleanup principle in its guide to fetching data with Effects.

Both query and load remain dependencies. In this example, the test transport provides a stable load function. Check the function’s identity in your application: a newly created function on every render will cause the Effect to run again.

Protect the error and empty states too.

Old success: the success callback checks its flag before replacing the current data.

Old failure: the rejection callback uses the same check. Otherwise, a failed old request can still hide the successful new result.

New failure: an old success must not erase an error from the current query. The obsolete success callback is ignored even when the newer request failed.

Cleared query: cleanup invalidates the previous invocation before the empty-query Effect sets the state to idle. A late response cannot repopulate the cleared view.

The example keeps loading, data and error together in one state object. If your implementation changes loading in a separate finally callback, that asynchronous state update needs the same relevance check.

Test response order, not a lucky delay.

The test transport returns promises whose resolution and rejection are controlled by the test. No live endpoint or timer decides which response arrives first. The tests mount the actual hook in a React DOM tree, wrap updates with act, and inspect its rendered output.

This excerpt exercises a late failure. The full test file in the download includes transport, render, succeed, fail and state; the excerpt depends on those helpers.

test('an older failure cannot replace a newer successful result', async () => {
  const api = transport();
  await render('old', api.load);
  const old = api.latest('old');
  await render('new', api.load);
  await succeed(api.latest('new'), ['new result']);
  await fail(old);
  assert.deepEqual(state(), { phase: 'ready', data: ['new result'], error: null });
});

The run used Node 24.19.0, React and React DOM 19.2.6, and jsdom 30.1.0, with Strict Mode enabled. The original passed one test and failed four; the patched source passed all five. Applying the patch to a fresh copy of the original also reproduced the tested source.

Download the original, patch, tests and recorded results. The README contains installation and test instructions; the handover states the acceptance criterion and limits.

What this small patch does not do

The flag ignores obsolete callbacks; it does not cancel the underlying request. There is no debounce, caching, retry policy or request deduplication here. The example assumes load returns a promise and does not throw synchronously.

These checks establish the five behaviours above in React DOM with jsdom. They do not verify a real browser, network service, Next.js integration or every possible update schedule. The guard acts when Effect cleanup runs; this example does not claim that a changed input and cleared display update atomically before every paint.

If your application already has a framework data layer, review its existing request and cache lifecycle before adding a second one. React’s data-fetching guidance explains the tradeoffs of fetching manually in Effects.