{
  "app": {
    "name": "Mokabla",
    "url": "https://www.mokabla.com",
    "description": "Real interview questions from companies in Egypt, organised by company. Access is sold per company for 30 days."
  },
  "page": {
    "kind": "question",
    "title": "Question · race-condition-in-react-handling-out-of-order-api-responses",
    "humanPath": "/en/c/bask-health/race-condition-in-react-handling-out-of-order-api-responses",
    "humanOnly": false
  },
  "identity": {
    "class": "declared",
    "agent": "ClaudeBot",
    "operator": "Anthropic",
    "verified": false,
    "reason": "The user agent is ClaudeBot (Anthropic), which identifies itself as an AI agent.",
    "signals": [
      "Known agent user agent"
    ],
    "claimable": false
  },
  "state": {
    "question": {
      "slug": "race-condition-in-react-handling-out-of-order-api-responses",
      "title": "Race Condition in React: Handling Out-of-Order API Responses",
      "difficulty": "medium",
      "tags": [
        "frontend",
        "technical",
        "role-frontend",
        "role-ml"
      ],
      "is_free": true,
      "locked": false,
      "frequency": 1,
      "last_reported_at": "2026-11-03T22:34:13.675545Z",
      "url": "https://www.mokabla.com/en/c/bask-health/race-condition-in-react-handling-out-of-order-api-responses",
      "agent": {
        "page": "https://www.mokabla.com/agent/en/c/bask-health/race-condition-in-react-handling-out-of-order-api-responses",
        "question": "https://www.mokabla.com/agent/_call/get_question?company=bask-health&question=race-condition-in-react-handling-out-of-order-api-responses"
      },
      "company": {
        "slug": "bask-health",
        "name_en": "bask health"
      },
      "body_md": "Race Condition in React: Handling Out-of-Order API Responses\n\n```jsx\nuseEffect(() => {\n  fetch(`/api/user/${id}`)\n    .then((r) => r.json())\n    .then(setUser);\n}, [id]);\n```\n\n**The bug:** if `id` changes from 1 to 2, both requests are in flight. If request 1 resolves *after* request 2, `setUser` runs last with user 1's data, so the UI shows the wrong user while `id === 2`. It can also call `setUser` after the component unmounts.\n\n**Fix 1: ignore stale responses (the canonical answer, from the React docs)**\n\n```jsx\nuseEffect(() => {\n  let ignore = false;\n  fetch(`/api/user/${id}`)\n    .then((r) => r.json())\n    .then((data) => { if (!ignore) setUser(data); });\n  return () => { ignore = true; };\n}, [id]);\n```\n\nEach effect run closes over its own `ignore`. The cleanup runs before the next effect, so only the latest request can write state.\n\n**Fix 2: AbortController (better, because it cancels the network request too)**\n\n```jsx\nuseEffect(() => {\n  const controller = new AbortController();\n  fetch(`/api/user/${id}`, { signal: controller.signal })\n    .then((r) => {\n      if (!r.ok) throw new Error(r.status);\n      return r.json();\n    })\n    .then(setUser)\n    .catch((e) => { if (e.name !== 'AbortError') setError(e); });\n  return () => controller.abort();\n}, [id]);\n```\n\nGood responses\n- **Why the flag alone isn't enough:** it prevents the stale write, but the request still finishes and uses bandwidth. Abort actually cancels it. Many people combine the two, because the server may already have responded and `json()` parsing can still be pending.\n- **Filter out `AbortError`** so a cancelled request doesn't show up as an error state.\n- **`r.ok` check:** `fetch` doesn't reject on 4xx or 5xx, which the original code also ignores.\n- **StrictMode:** in development, effects mount, unmount, and remount. Correct cleanup is what makes this safe, and it's a good way to surface the bug.\n- **Alternative without cleanup:** keep a `requestIdRef` counter, increment it per call, and only commit a response if its id matches the latest. This pattern also works outside effects, such as in event handlers and debounced search.\n- **Production answer:** use TanStack Query or SWR. They key the cache by `['user', id]`, so out-of-order responses can't overwrite each other, and you also get deduplication, caching, and retries. In React 19, `use()` with Suspense is another option.\n- **UX detail:** clear the user or show a loading state when `id` changes. Otherwise the stale user is visible while the new one loads.",
      "follow_ups_md": "apply the same reasoning to a search-as-you-type input, where the race condition is far more common."
    },
    "paid": false,
    "access": "Question bodies are paid content: a person buys 30 days of access per company (200 EGP or 200 points) in the human app. Agents get titles, tags and difficulty; bodies only for free questions."
  },
  "actions": [
    {
      "name": "get_question",
      "description": "One question with its body. Bodies are paid content unless the question is free.",
      "permission": "allow",
      "sideEffect": "read",
      "input": {
        "company": "string",
        "question": "string"
      },
      "href": "https://www.mokabla.com/agent/_call/get_question?company=bask-health&question=race-condition-in-react-handling-out-of-order-api-responses",
      "ready": true,
      "missing": [],
      "humanPath": "https://www.mokabla.com/en/pricing"
    },
    {
      "name": "list_questions",
      "description": "The questions reported at a company: titles, tags, difficulty, whether each is free or paid.",
      "permission": "allow",
      "sideEffect": "read",
      "input": {
        "company": "string",
        "page": "number?"
      },
      "href": "https://www.mokabla.com/agent/_call/list_questions?company=bask-health",
      "ready": true,
      "missing": []
    },
    {
      "name": "buy_access",
      "description": "Buy 30 days of access to a company.",
      "permission": "block",
      "reason": "This action is for people only",
      "ruleId": "R1",
      "sideEffect": "payment",
      "input": {
        "company": "string"
      },
      "href": "https://www.mokabla.com/agent/_call/buy_access?company=bask-health",
      "ready": true,
      "missing": [],
      "humanPath": "https://www.mokabla.com/en/pricing"
    },
    {
      "name": "post_comment",
      "description": "Comment on a question.",
      "permission": "block",
      "reason": "This action is for people only",
      "ruleId": "R1",
      "sideEffect": "write",
      "input": {
        "question": "string",
        "text": "string"
      },
      "href": "https://www.mokabla.com/agent/_call/post_comment?question=race-condition-in-react-handling-out-of-order-api-responses",
      "ready": false,
      "missing": [
        "text"
      ],
      "humanPath": "https://www.mokabla.com/en/companies"
    }
  ],
  "navigate": [
    {
      "label": "This question, as data (free questions only)",
      "href": "https://www.mokabla.com/agent/_call/get_question?company=bask-health&question=race-condition-in-react-handling-out-of-order-api-responses"
    },
    {
      "label": "All questions at this company",
      "href": "https://www.mokabla.com/agent/_call/list_questions?company=bask-health"
    },
    {
      "label": "The company page",
      "href": "https://www.mokabla.com/agent/en/c/bask-health"
    },
    {
      "label": "Race Condition in React: Handling Out-of-Order API Responses · page",
      "href": "https://www.mokabla.com/agent/en/c/bask-health/race-condition-in-react-handling-out-of-order-api-responses"
    }
  ],
  "notices": [
    {
      "severity": "info",
      "message": "This classification is final for the session: it came from a strong signal, not a guess. The human pages are not served to agents."
    },
    {
      "severity": "info",
      "message": "Unverified agents are read-only. Signed requests (Web Bot Auth) are the path to write access."
    }
  ],
  "meta": {
    "requestId": "ag_2eb0bae8a913",
    "policyVersion": "mokabla-2026-11-03",
    "generatedAt": "2026-11-04T00:55:41.646Z",
    "jsonUrl": "https://www.mokabla.com/agent/en/c/bask-health/race-condition-in-react-handling-out-of-order-api-responses?format=json",
    "manifestUrl": "https://www.mokabla.com/.well-known/agentgate.json",
    "humanUrl": "https://www.mokabla.com/en/c/bask-health/race-condition-in-react-handling-out-of-order-api-responses",
    "humanClaimUrl": "https://www.mokabla.com/agent/_claim/human?to=%2Fen%2Fc%2Fbask-health%2Frace-condition-in-react-handling-out-of-order-api-responses"
  }
}