React · Frontend system thinking

What is derived state and why is duplicating it a problem?

Mediumderived statestaterenderingUpdated Oct 2026

Short answer

Derived state is computed from existing props or state during render. Storing a second copy in state creates two sources of truth that can drift out of sync.

If a value can be calculated from existing data, calculate it during render. React will recompute it when the inputs change. Only store it if you need a snapshot that should not follow the source automatically.

jsx

function ProductList({ products, query }) {
  const visible = products.filter((product) =>
    product.name.toLowerCase().includes(query.toLowerCase()),
  );

  return <List items={visible} />;
}

visible is derived during render, so it cannot go stale.

The anti-pattern

jsx

const [visible, setVisible] = useState([]);

useEffect(() => {
  setVisible(products.filter((product) => product.name.includes(query)));
}, [products, query]);

This adds an extra render and can briefly show stale data. Compute it instead.

Derived values are cheap to compute during render
Use useMemo only when the calculation is expensive or identity matters
Do not mirror props in state unless you intentionally want to ignore later prop changes
If you need to reset derived state when an id changes, use a key instead of an effect

Synchronising state with an effect is a common source of bugs. If the value can be computed, compute it. Effects are for external systems, not for deriving UI from props.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1Why is copying props into state usually wrong?
2When is `useMemo` appropriate for derived data?
3How do you reset state when an id changes?
4What is the difference between derived state and computed values?

Say it in the interview

Derived state is a value computed from existing props or state. I calculate it during render instead of storing another copy, because duplicated state can drift and requires an effect to synchronise. If the computation is expensive or its identity matters, I memoize it. Effects should synchronise with external systems, not mirror props into state.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.

Start a free React interview Browse all questions

The anti-pattern

Follow-ups you should expect

Related questions

Now say it out loud.