Concept questionMedium~7 minReact Components & State / 3 of 8

Interview question

When should a value be derived during render instead of stored in React state?

Avoid duplicated derived state in React

Explains when to derive values during render instead of storing duplicate state that can drift.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

If a value can be calculated from current props or state, I usually derive it during render instead of storing it separately. For example, filtered items can be derived from items and filter text. Storing both the raw list and filtered list creates a synchronization problem. State is best for values that change independently, such as user input, selected id, open panels, or server data.

Full answer below

Practice focus

Derived values, single source of truth, stale state, memoization, form state, and UI consistency.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
A lot of subtle React bugs come from storing data that could have been calculated from existing props or state. This drill checks whether the candidate keeps state minimal.
If a value can be calculated from current props or state, I usually derive it during render instead of storing it separately. For example, filtered items can be derived from items and filter text. Storing both the raw list and filtered list creates a synchronization problem. State is best for values that change independently, such as user input, selected id, open panels, or server data.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would use useMemo only when the derived calculation is expensive or when referential stability matters for child components. I would not use memoization to hide unclear state ownership. Some derived values become state when the user can edit them independently, such as a draft field initialized from server data. In that case I would name the draft state clearly and define how reset, save, and server refresh behave.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would look for bugs where badges, counts, filters, and selected records disagree after a mutation. Those often point to duplicated derived state or incomplete cache invalidation. Keeping state minimal makes optimistic updates and refetching simpler because there are fewer values to reconcile. I would test the transitions that usually expose drift: changing filters, deleting selected rows, receiving new props, and resetting forms after save.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Storing filtered or counted data when it can be derived cheaply.
Using useEffect to keep duplicate state in sync.
Memoizing unclear logic instead of simplifying state ownership.
Forgetting reset behavior for draft state initialized from props.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot explain single source of truth.
Creates synchronization effects for every derived value.
UI values drift after mutations or filter changes.
No distinction between draft state and server state.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When does derived data become real state?
When would useMemo help?
How can duplicated state break after a delete?

Continue the section

Next in React Components & State: Keys and Identity

Step 4 of 8

Explain React keys and component identity

Opening drill

Concept questionMedium~7 minReact Components & State / 3 of 8

Interview question

When should a value be derived during render instead of stored in React state?

Avoid duplicated derived state in React

Explains when to derive values during render instead of storing duplicate state that can drift.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Derived values, single source of truth, stale state, memoization, form state, and UI consistency.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
A lot of subtle React bugs come from storing data that could have been calculated from existing props or state. This drill checks whether the candidate keeps state minimal.
If a value can be calculated from current props or state, I usually derive it during render instead of storing it separately. For example, filtered items can be derived from items and filter text. Storing both the raw list and filtered list creates a synchronization problem. State is best for values that change independently, such as user input, selected id, open panels, or server data.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would use useMemo only when the derived calculation is expensive or when referential stability matters for child components. I would not use memoization to hide unclear state ownership. Some derived values become state when the user can edit them independently, such as a draft field initialized from server data. In that case I would name the draft state clearly and define how reset, save, and server refresh behave.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would look for bugs where badges, counts, filters, and selected records disagree after a mutation. Those often point to duplicated derived state or incomplete cache invalidation. Keeping state minimal makes optimistic updates and refetching simpler because there are fewer values to reconcile. I would test the transitions that usually expose drift: changing filters, deleting selected rows, receiving new props, and resetting forms after save.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Storing filtered or counted data when it can be derived cheaply.
Using useEffect to keep duplicate state in sync.
Memoizing unclear logic instead of simplifying state ownership.
Forgetting reset behavior for draft state initialized from props.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot explain single source of truth.
Creates synchronization effects for every derived value.
UI values drift after mutations or filter changes.
No distinction between draft state and server state.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When does derived data become real state?
When would useMemo help?
How can duplicated state break after a delete?

Continue the section

Next in React Components & State: Keys and Identity

Step 4 of 8

Explain React keys and component identity

When should a value be derived during render instead of stored in React state?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

When should a value be derived during render instead of stored in React state?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section