{
  "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 · derived-state-in-react",
    "humanPath": "/en/c/trufla/derived-state-in-react",
    "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": "derived-state-in-react",
      "title": "Derived State in React",
      "difficulty": "medium",
      "tags": [
        "frontend",
        "technical",
        "role-frontend"
      ],
      "is_free": true,
      "locked": false,
      "frequency": 0.25,
      "last_reported_at": "2025-02-20T20:14:18.260538Z",
      "url": "https://www.mokabla.com/en/c/trufla/derived-state-in-react",
      "agent": {
        "page": "https://www.mokabla.com/agent/en/c/trufla/derived-state-in-react",
        "question": "https://www.mokabla.com/agent/_call/get_question?company=trufla&question=derived-state-in-react"
      },
      "company": {
        "slug": "trufla",
        "name_en": "Trufla"
      },
      "body_md": "## What they ask\nThe technical interview with the tech lead is a conversation about your background and the stack, and it is mainly React. The recurring question: \"How do you handle a state change in React that depends on another state?\" They give a small scenario and want you to reason about it, not recite hooks.\n\n## Example\nA product list with a search box and a category dropdown. `items` come from the API, `query` and `category` are user input. Where does the filtered list live?\n\nOptions they expect you to compare:\n1. **Compute during render.** `const visible = items.filter(...)`. No extra state, always consistent, cheap for small lists. This is the default answer and they want you to say why.\n2. **`useMemo`** around the same computation when the list is large or the filter is expensive; explain the dependency array.\n3. **`useEffect` that sets a second state** whenever `query` changes. Works, but causes an extra render, can go stale, and is the anti-pattern they are fishing for. Explain when it is still legitimate (syncing with something outside React).\n4. **Reset via `key`** when a subtree should restart its local state because a parent value changed (for example, a form keyed by the selected customer id).\n5. **Lift state or use a reducer** when several pieces of state must change together (query changes should reset the page number).\n\n## What they look for\n- Preferring derived values over duplicated state, and naming the render-cycle cost of the effect approach.\n- Knowing `useReducer` for coupled updates and when to reach for a store instead.\n- Talking about how you tested it and what happens on slow API responses (loading, race conditions with stale results).",
      "follow_ups_md": "- The API is slow and the user types fast; how do you avoid showing results for an older query?\n- When would you move this state into a global store?"
    },
    "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=trufla&question=derived-state-in-react",
      "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=trufla",
      "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=trufla",
      "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=derived-state-in-react",
      "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=trufla&question=derived-state-in-react"
    },
    {
      "label": "All questions at this company",
      "href": "https://www.mokabla.com/agent/_call/list_questions?company=trufla"
    },
    {
      "label": "The company page",
      "href": "https://www.mokabla.com/agent/en/c/trufla"
    },
    {
      "label": "Derived State in React · page",
      "href": "https://www.mokabla.com/agent/en/c/trufla/derived-state-in-react"
    }
  ],
  "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_86b83de2f60e",
    "policyVersion": "mokabla-2026-11-03",
    "generatedAt": "2026-11-03T18:40:14.482Z",
    "jsonUrl": "https://www.mokabla.com/agent/en/c/trufla/derived-state-in-react?format=json",
    "manifestUrl": "https://www.mokabla.com/.well-known/agentgate.json",
    "humanUrl": "https://www.mokabla.com/en/c/trufla/derived-state-in-react",
    "humanClaimUrl": "https://www.mokabla.com/agent/_claim/human?to=%2Fen%2Fc%2Ftrufla%2Fderived-state-in-react"
  }
}