Estado derivado es cualquier valor que puedas calcular a partir del estado existente en lugar de almacenarlo por separado. El principio: si puedes calcularlo, no lo almacenes — derívalo en cada renderizado. Almacenar valores derivables los invita a desincronizarse.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
Ahora total es una segunda copia de la información que ya está en items. Cada cambio en items debe también actualizar total, y en el momento en que pierdas uno (una eliminación, un cambio de cantidad), discrepan y la UI muestra el total incorrecto.
// ✅ 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
}
}
Con total derivado, no hay nada extra que mantener sincronizado — cambia items y el total siempre es correcto.
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
Para derivaciones pesadas (filtros/ordenamientos grandes), useMemo/computed/selectors cachean el resultado para que solo se recalcule cuando cambien las dependencias — pero sigue siendo derivado, no almacenado como estado independiente.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
No duplicar el estado derivado es una aplicación directa del único origen de verdad — elimina una clase completa de errores donde las copias se dessincronizan.
La regla "deriva, no almacenes" mantiene tu estado mínimo y tu UI consistente por construcción.
Reconocer qué es derivable (y recurrir a useMemo/computed/selectors solo para el rendimiento, nunca para crear una segunda fuente de verdad) es una característica del diseño de estado limpio y resistente a errores.