Estado derivado | React

• Estado derivado | React

Derived State no React refere-se ao estado que é calculado (ou "derivado") com base em algum outro estado ou propriedade já existente no componente. Ao invés de armazenar diretamente valores que podem ser computados dinamicamente a partir de outras informações, derivamos esses valores quando necessário para evitar inconsistências e simplificar o código.

---

Por que evitar armazenar estados derivados?

Suponha que você tenha um count (estado) e queira exibir algum valor que dependa de count, por exemplo, dobro = count * 2. Há duas abordagens:

1. Armazenar apenas count no estado e calcular dobro quando precisar:

   function MyComponent() {
     const [count, setCount] = useState(0);
   
     const dobro = count * 2;
   
     return (
       <div>
         <p>Count: {count}</p>
         <p>Dobro: {dobro}</p>
         <button onClick={() => setCount((prev) => prev + 1)}>Incrementar</button>
       </div>
     );
   }

   • Vantagem: sempre que count muda, dobro permanece consistente sem esforço adicional.
   • Desvantagem: você recalcula o dobro em cada renderização, mas esse cálculo é simples e não traz sobrecarga significativa. Em geral, lidar com cálculos leves em cada render é mais seguro do que manter estados em duplicidade que podem divergir.

2. Manter count e dobro como estados distintos:

   function MyComponent() {
     const [count, setCount] = useState(0);
     const [dobro, setDobro] = useState(0);
   
     const incrementar = () => {
       setCount((prev) => prev + 1);
       setDobro((prev) => prev + 2); // Sincronizando manualmente
     };
   
     return (
       <div>
         <p>Count: {count}</p>
         <p>Dobro: {dobro}</p>
         <button onClick={incrementar}>Incrementar</button>
       </div>
     );
   }

   • Vantagem: se o cálculo de dobro fosse muito complexo, armazená-lo poderia economizar processamento em renders futuros.
   • Desvantagem: você agora tem duas "fontes de verdade" que precisam ser mantidas em sincronia. Qualquer falha de sincronização (por exemplo, esquecer de atualizar dobro ou atualizar com valor errado) causa bugs.

No geral, React recomenda armazenar somente o que for necessário para o estado e derivar o resto no momento do render. Assim, você minimiza riscos de inconsistência.

---

Em que casos vale a pena armazenar estado derivado?

Há situações em que um cálculo derivado é muito custoso e não é prático recalcular a cada render. Exemplos extremos podem incluir parsing pesado, transformações complexas de dados ou renderizações em listas enormes. Nesses casos, algumas estratégias são:

1. Memoização com hooks como useMemo:

   const valorDerivado = useMemo(() => {
     // Cálculo pesado aqui
     return calculaValorPesado(estadoOuProps);
   }, [estadoOuProps]);

   • Dessa forma, valorDerivado só é recalculado quando estadoOuProps mudar, e não é armazenado diretamente no estado. Você evita reconstruir esse valor em cada render “à toa”.

2. Armazenar em estado (como último recurso)

   • Se nem memoização nem outras técnicas suprem o problema, é possível armazenar o valor derivado em um estado próprio. Mas é fundamental garantir que esse estado seja sempre atualizado quando a dependência mudar, senão você introduz inconsistências no app.

---

“Derived State” vs. “getDerivedStateFromProps”

Historicamente, o conceito de “Derived State” também aparecia em ciclos de vida de classes React (método estático getDerivedStateFromProps) para criar um estado baseados em props. É fortemente desencorajado abusar dessa técnica; a recomendação atual (usando Hooks) é, se possível, derivar valores dinamicamente ou usar memoização ao invés de manter estados duplicados.

---