Estado derivado é qualquer valor que você pode calcular a partir do estado existente em vez de armazenar separadamente. O princípio: se você pode calcular, não armazene — derive em cada renderização. Armazenar valores deriváveis convida-os a ficarem fora de sincronização.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
Agora total é uma segunda cópia de informações já em items. Cada mudança em items deve também atualizar total, e no momento em que você perder uma (uma remoção, uma mudança de quantidade), eles discordam e a UI mostra o total errado.
// ✅ compute total from items — always correct, never out of sync
function Cart() {
const [items, setItems] = useState([]);
const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render
function addItem(item) {
setItems([...items, item]); // ONE update; total recomputes automatically
}
}
Com total derivado, não há nada extra para manter em sincronização — mude items e o total está sempre correto.
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
Para derivações pesadas (filtros/ordenações grandes), useMemo/computed/selectors armazenam em cache o resultado para que ele seja recomputado apenas quando as dependências mudam — mas ainda é derivado, não armazenado como estado independente.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
Não duplicar estado derivado é uma aplicação direta de fonte única de verdade — elimina uma classe inteira de bugs onde cópias divergem.
A regra "derive, não armazene" mantém seu estado mínimo e sua UI consistente por construção.
Reconhecer o que é derivável (e recorrer a useMemo/computed/selectors apenas para desempenho, nunca para criar uma segunda fonte de verdade) é uma marca registrada do design de estado limpo e resistente a bugs.