Derived State

Derived state is a value that can be computed from existing props or state. In frontend components, it is usually better to calculate such values during rendering than to store a second state value that can become inconsistent.

If a value can be calculated entirely from current props and state, it is derived data rather than independent state. Examples include filtered lists, totals, boolean flags, and formatted labels.

Storing derived data creates two representations of the same underlying information. When the source changes, the stored copy must also be updated, which introduces synchronization work and can produce stale UI.

A render-time calculation keeps one source of truth: the original props or state. For expensive calculations, memoization can reduce repeated work, but memoization is an optimization and does not make the derived value independent state.

An important distinction is whether a value can be reconstructed from current inputs. If it can, prefer deriving it. If the value represents information that cannot be recovered from existing inputs, or represents an independently changing fact, it may belong in state.

Key points

• Prefer calculating values from props and state during rendering when possible.
• Avoid duplicate state that mirrors existing data.
• Derived values have no independent source of truth.
• Use memoization for expensive derivations when measurement justifies it.
• Store state when the value has independent lifecycle or cannot be reconstructed from existing inputs.

Interview questions

What is derived state, and why should you usually avoid storing it?

Derived state is a value that can be calculated from existing props or state. Storing it separately duplicates information and creates a synchronization problem when its inputs change. Computing it during rendering keeps the original data as the source of truth. This also removes unnecessary update logic.

Why can synchronizing derived state with an effect be problematic?

An effect runs after rendering, so a component can first render with the old derived value and then render again after the effect updates state. That adds unnecessary state and update work. It also creates another place where synchronization can fail if a dependency is omitted or the derivation changes. Directly calculating the value during render avoids this synchronization step.

How would you handle an expensive derived calculation?

I would first determine whether the calculation is actually expensive enough to matter. If it is, I can memoize the derived result based on the inputs it depends on. The cached value is still derived data; memoization only changes how efficiently it is computed. I would avoid adding memoization purely by habit.

How do you decide whether a value belongs in state or should be derived?

I ask whether the value has an independent source of truth and whether it can be reconstructed from current inputs. If it is fully determined by props and existing state, I generally derive it. If it represents an independently changing fact, user input, or information that cannot be recovered from the current inputs, state may be appropriate. I also consider whether introducing state creates synchronization responsibilities or ownership ambiguity.