Keep old React search responses from replacing the current query

Requests can complete in a different order from the queries that started them. Aborting reduces wasted work; invalidating the old effect prevents a response already resolving from writing stale state. Protect the error branch as well as successful results.

Save this requirement in Perch and check it after each agent edit. The rule gives your agent a named check to run, a finding to repair, and the same command to recheck.

Implement the React boundary

Save this illustrative integration module as src/useOrderSearch.js.

import { useEffect, useState } from "react";

export function useOrderSearch(query) {
  const [state, setState] = useState({items:[],error:null});
  useEffect(() => {
    let obsolete = false;
    const controller = new AbortController();
    setState({items:[],error:null});
    fetch(`/api/orders?q=${encodeURIComponent(query)}`, {signal:controller.signal})
      .then(response => { if (!response.ok) throw new Error("Search failed"); return response.json(); })
      .then(items => { if (!obsolete) setState({items,error:null}); })
      .catch(error => { if (!obsolete && error.name !== "AbortError") setState({items:[],error}); });
    return () => { obsolete = true; controller.abort(); };
  }, [query]);
  return state;
}

The order, inventory, or resource-lifetime scenario is adapted from Perch’s public order-service source at commit 4af67af. This React implementation is an illustrative adaptation.

Integrate with your application

Use this hook in a client React component backed by an authenticated, tenant-scoped API. The hook controls UI freshness; server authorization remains in the API. Test under Strict Mode and make your fetch test double resolve an old request after a newer one, even after abort, to exercise the invalidation guard independently of browser cancellation.

Exercise the boundary and failure paths

Add regression tests for these cases in your existing React test project. Use separate connections or deliberately reordered completion where the case involves concurrency; a sequential happy-path test does not exercise that failure. Run the test command after creating the matching test file or suite:

npx vitest run src/useOrderSearch.test.jsx

The scenarios above specify tests to implement. A completed Perch source check below is separate from running these application integration tests.

Introduce the specific agent regression

In a throwaway copy, replace this source span:

if (!obsolete) setState({items,error:null});

with:

setState({items,error:null});

Run the relevant negative test and the Perch command on that broken copy. Restore the corrected source before committing the application. The supplied mutation reproduces the exact regression for the rule check.

Preserve the requirement as a Perch rule

Save this in .perch/rules/perch-guide-react-stale-request-cleanup.yaml at the repository root, keeping your existing perch.yaml:

- name: obsolete-search-does-not-update
  where: "src/useOrderSearch.js"
  ensure: >-
    The fulfilled search response must check obsolete before setting items, so a response for a previous query cannot replace the current result.

Install and authenticate the CLI once, then check the current working file:

npm install -g @lakeday/perch
perch login
perch check src/useOrderSearch.js --rules obsolete-search-does-not-update --json

Use Node 22 or newer. The framework can use another language; Perch’s CLI remains a Node command. A gated finding exits 3. Exits 1 or 2 mean the check did not complete and must be reported as a blocker.

Inspect the captured rule check

On 2026-10-14, Perch using jev-latest checked the exact fixed and broken source provided here. The capture records SHA-256 hashes of both sources and the requirement.

The rule distinguished these controls in this run. Raw Perch capture · Exact sources and mutation.

Install the rule pack and configure your agent

Download this rule pack ZIP · Download the YAML rules · Agent task. The pack contains the rule, its example paths and the repair/recheck instructions. Review the where selector before using it in an existing project. Keep your root perch.yaml; install this rule as a separate file under .perch/rules/.

1. Install Perch using Node 22 or newer and sign in once:

npm install -g @lakeday/perch
perch login

2. Download the pack, inspect it, and extract it from your repository root. The extraction preserves any existing files:

curl -fL 'https://frameworkrecipes.dev/react/stale-request-cleanup/rule-pack.zip' -o 'perch-guide-react-stale-request-cleanup.zip'
unzip -n 'perch-guide-react-stale-request-cleanup.zip'

The installed rule is .perch/rules/perch-guide-react-stale-request-cleanup.yaml. Its selector matches src/useOrderSearch.js in this example; adapt the selector to your application file before checking an existing project.

3. Configure the coding agent you use. Run one of these commands:

Claude Code:

perch setup claude-code

Codex:

perch setup codex

Cursor:

perch setup cursor

Pi:

perch setup pi

4. Ask the agent to edit the implementation and check the saved requirement:

Use the installed Perch skill while editing src/useOrderSearch.js. Preserve obsolete-search-does-not-update. Run perch check src/useOrderSearch.js --rules obsolete-search-does-not-update --json after the edit. Read each finding and the affected code, fix the implementation, and run the identical check again after the fix. Keep the rule and regression tests intact. Run the application's relevant regression tests and report the commands and actual results. Exit 3 means a rule finding; exit 1 or 2 means the check did not complete. Report an unavailable or incomplete check as blocked. Do not claim the application tests ran if only the Perch check ran.

5. After repairing a finding, run the same check again and inspect the result:

perch check src/useOrderSearch.js --rules obsolete-search-does-not-update --json

Commit the downloaded rule and the installed agent configuration with your application. The rule file adds no guarantee of correctness; keep the regression tests from this guide.

With the base reference fetched, use perch scan --since origin/main --filter type=lint in CI.

Framework references and verification scope

• react.dev reference

The dated capture records the source check shown above. Implement the adapters, schema and regression tests described in this guide in your application. Unchanged requests reuse cached answers; fresh model judgments can vary. Model analysis sends relevant source to the configured service.