Premium

Derive in render vs store derived state in React

Guided tradeoff battle · Updated Mar 29, 2026

A React filter panel needs visible results, a count badge, and a disabled Apply button. Would you compute these from current state or store them separately?

Derive in render
Store derived state separately

What you’ll build / What this tests

This premium react tradeoff battle focuses on Derive in render vs store derived state in React. Commit to a direction, justify it with the prompt constraints, and explain when the alternative wins.

Learning goals

Is there already one clear source of truth?
How likely is duplicated state to drift out of sync?
Do you need a live calculation or a committed snapshot?
Is the calculation expensive enough to optimize?

Key decisions to discuss

Pick a direction for this exact prompt, not the universal winner.
State the trade-off that matters most for this scenario.
Name when another option becomes the better answer.
Keep the explanation grounded in concrete constraints.

Evaluation rubric

Strong answers tie the recommendation to the prompt.
Good tradeoff reasoning explains downsides, not just upsides.
The answer should show when the recommendation stops being right.
Follow-up pressure should not break the argument.

Constraints / Requirements

Which direction would you defend for this prompt, and how would you explain when the other option is…
Keeps one source of truth when a value can be recomputed from the current state and…
Can make sense when the value is no longer just a live calculation and now needs…

Options on the table

Derive in render: Keeps one source of truth when a value can be recomputed from the current…
Store derived state separately: Can make sense when the value is no longer just a live calculation and…

Common pitfalls

Arguing from preference instead of prompt constraints.
Pretending one option is always the winner.
Ignoring the main downside of the chosen direction.
Failing to explain when the alternative becomes stronger.