¿Qué es un estado derivado? Piense en un estado para texto y luego en otro para texto en mayúsculas.

Estado derivado

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const [uppercaseText, setUppercaseText] = useState(text.toUpperCase());

    useEffect(() => {
        setUppercaseText(text.toUpperCase());
    }, [text])

    ...
}

Dicho así, es una locura pensar que alguien haría esto… ¿verdad? ¿BIEN?

Sí, un ejemplo como este dejará claro que esto está mal.

Lo malo del estado derivado

• Almacenado por separado y no sincronizado con el estado real.
• Desencadenantes (dependen) de renderizaciones innecesarias.

¿Cómo refactorizar el estado derivado?

Digamos que es un cálculo costoso… la solución es usar useMemo.

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const uppercaseText = useMemo(() => text.toUpperCase(), [text]);
    ...
}

¿Cómo detectar rápidamente el estado que se puede derivar?

Se me ocurrió una buena forma de pensar que debería hacer que sea más fácil SABER si un estado debería ser “otro estado” o simplemente una propiedad calculada (memorizada o no, según el caso).

function Foo({
    text = 'hello, za warudo!',
    uppercaseText = text.toUpperCase(),
}) {
    ...
}

// Forget react for a moment...
// Would you ever call a function like this?
const text = 'hello, za warudo!';
Foo({
    text,
    uppercaseText: text.toUpperCase(),
});

Si piensas en esos estados como “accesorios”, entonces esto hace que sea más descarado lo que debería ser.

Olvídate de React por completo, piensa solo en las funciones:
¿Llamarías a una función con una variable y luego otra variable que pudieras calcular dentro?