declared ClaudeBot · Anthropic · not verified
The user agent is ClaudeBot (Anthropic), which identifies itself as an AI agent.
Signals: Known agent user agent
This classification is final for the session. The human pages are not served to agents.
{
"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."
}
| action | input | permission | |
|---|---|---|---|
| get_question One question with its body. Bodies are paid content unless the question is free. | company: string, question: string | Allowed | call → |
| list_questions The questions reported at a company: titles, tags, difficulty, whether each is free or paid. | company: string, page: number? | Allowed | call → |
| buy_access Buy 30 days of access to a company. | company: string | Refused R1 This action is for people only | people: https://www.mokabla.com/ar/pricing |
| post_comment Comment on a question. | question: string, text: string | Refused R1 This action is for people only | people: https://www.mokabla.com/ar/companies |
Allowed actions answer in JSON. Add ?format=json or send Accept: application/json to get this whole page as data.