Estado derivado

O que e

Estado derivado e qualquer valor que você consegue calcular durante o render olhando para props ou para outro estado.

Se você já tem items e query, por exemplo, visibleItems costuma ser estado derivado. Não precisa de outro useState.

Quando importa

Isso importa quando um componente começa a copiar props para dentro do próprio estado ou tenta manter duas fontes de verdade sincronizadas.

E assim que muito bug silencioso de interface aparece.

Erro comum

O erro mais comum e criar useEffect para atualizar um segundo estado sempre que o original muda.

Isso cria sincronização manual. Agora você tem dois valores que representam a mesma coisa e podem sair de alinhamento.

Exemplo curto

Se a tela guarda items e query, adicionar um terceiro useState para visibleItems normalmente e armadilha.

O mais comum e calcular visibleItems direto no corpo do componente, ou memoizar só se o custo for relevante.

Por que ajuda

Quanto menos lugares tentam guardar a mesma verdade, mais previsivel o componente fica.

Isso reduz UI desatualizada e render desnecessario.