O que é um estado derivado? Pense em um estado para texto e depois outro para texto maiúsculo.

Estado Derivado

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

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

    ...
}

Colocando assim, é uma loucura pensar que alguém faria isso… certo? CERTO?

Sim, um exemplo como este deixará claro que isso está errado.

O mal do estado derivado

• Armazenado separadamente e fora de sincronia com o estado real.
• Os gatilhos (dependem) de novas renderizações desnecessárias.

Como refatorar o estado derivado?

Digamos que é um cálculo caro… a solução é usar useMemo.

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

Como identificar rapidamente o estado que pode ser derivado?

Eu criei uma boa maneira de pensar que deveria tornar mais fácil SABER se um estado deveria ser “outro estado” ou apenas uma propriedade computada (memorizada ou não dependendo do 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(),
});

Se você pensar nesses estados como “adereços”, então isso torna mais flagrantemente o que deveria ser.

Esqueça totalmente o React, pense apenas nas funções:
Você chamaria uma função com uma variável e depois outra variável que você pudesse calcular dentro?