derived state
Calculate a value from state you already have.
Use this when A total, filtered list, or count falls out of sync.
without the term
“The cart total and item count keep getting out of sync with the items. There's a useEffect that updates the total whenever items change. Can you make the numbers always match?”
with the term · How do you ask a model for derived state?
Use derived state for the filtered list and count. Remove the synchronization effect and verify both update from the same inputs.
What is derived state?
Derived state is computed from existing inputs. In React, values needed for rendering can usually be calculated during render.
Why does derived state matter when vibe coding?
Effects that copy computed values into another state variable create extra synchronization work.
How do you do derived state?
Remove the redundant stored value. Check that one input change updates every dependent display.
What goes wrong with derived state?
A stored duplicate survives under a different name.