Usando estados derivados no lugar do useEffect
Como usar estados derivados em vez de useEffect no React
Estados derivados são uma maneira simples de melhorar a organização e a eficiência do código no React. Enquanto o useEffect é comumente utilizado para sincronizar dados, os estados derivados podem ser uma alternativa mais adequada quando o objetivo é obter novos dados a partir de estados existentes.
Para compreender os estados derivados, é importante questionar se realmente é necessário utilizar o useEffect em determinada situação ou se um estado derivado resolveria de forma mais eficiente. Os estados derivados são criados a partir de outros estados existentes, permitindo a obtenção de valores calculados ou formatados de forma otimizada.
import React, { useState, useEffect } from 'react';
function Carrinho() {
const [carrinho, setCarrinho] = useState([]);
const [total, setTotal] = useState(0);
useEffect(() => {
// Calcula o total a cada mudança no carrinho
let newTotal = 0;
carrinho.forEach(item => {
newTotal += item.preco;
});
setTotal(newTotal);
}, [carrinho]);
return (
<div>
<h1>Carrinho de Compras</h1>
{/* Renderiza os itens do carrinho */}
{/* Renderiza o total */}
<p>Total: R$ {total}</p>
</div>
);
}
export default Carrinho;Vamos considerar um exemplo em que utilizamos o useEffect para atualizar o total de itens em um carrinho de compras. A cada vez que um item é adicionado ou removido do carrinho, o useEffect é acionado para recalcular o total. No entanto, essa lógica poderia ser simplificada e tornada mais legível utilizando um estado derivado.
import React, { useState } from 'react';
function Carrinho() {
const [carrinho, setCarrinho] = useState([]);
// Cria um estado derivado para armazenar o total
const total = carrinho.reduce((acc, item) => acc + item.preco, 0);
return (
<div>
<h1>Carrinho de Compras</h1>
{/* Renderiza os itens do carrinho */}
{/* Renderiza o total */}
<p>Total: R$ {total}</p>
</div>
);
}
export default Carrinho;
Em vez de utilizar o useEffect para atualizar o total a cada mudança no carrinho, podemos criar um estado derivado chamado “total” que é calculado a partir do estado “carrinho”. Dessa forma, sempre que o estado “carrinho” for atualizado, o estado derivado “total” será automaticamente recalculado.
Utilizando estados derivados, o código se torna mais claro e menos propenso a erros. Além disso, a performance pode ser melhorada, pois evitamos executar o cálculo do total desnecessariamente em cada mudança no carrinho.
Os estados derivados também podem ser úteis em situações em que é necessário formatar ou transformar os dados de um estado existente antes de exibi-los. Em vez de utilizar o useEffect para fazer essa formatação a cada mudança no estado, podemos criar um estado derivado que armazena os dados formatados.
Por exemplo, suponha que temos um estado chamado “data” que contém um objeto com várias propriedades. Se quisermos exibir apenas o valor de uma dessas propriedades, podemos criar um estado derivado chamado “valorFormatado” que recebe o valor formatado da propriedade desejada.
Utilizar estados derivados em vez de useEffect no React nos permite escrever um código mais legível, organizado e eficiente. Além disso, torna mais fácil a manutenção e a compreensão do código por outros desenvolvedores. Portanto, sempre que possível, questione-se se um estado derivado poderia ser uma alternativa mais adequada para obter novos dados a partir de estados existentes.
