Allowed R6 · Within policy
{
"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?",
"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."
}