Derived State in React

What they ask

The 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.

Example

A 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?

Options they expect you to compare:

1. 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.
2. useMemo around the same computation when the list is large or the filter is expensive; explain the dependency array.
3. 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).
4. 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).
5. Lift state or use a reducer when several pieces of state must change together (query changes should reset the page number).

What they look for

• Preferring derived values over duplicated state, and naming the render-cycle cost of the effect approach.
• Knowing useReducer for coupled updates and when to reach for a store instead.
• Talking about how you tested it and what happens on slow API responses (loading, race conditions with stale results).