Pular para o conteúdo principal

useEffect

React possui vários Hooks que podem ser utilizados para resolver problemas específicos. Pense neles como uma caixinha de ferramentas, onde cada um possui uma função específica e vai te ajudar em algo. Também é possível construir seus próprios Hooks.

Aqui é uma das partes do React que eu mais gosto: a variedade de Hooks que podemos utilizar para resolver problemas é enorme. Vamos falar de um dos mais importantes e amplamente usados: o useEffect!

O que é o useEffect?​

O hook useEffect permite executar uma função quando o componente é renderizado ou quando algum estado ou propriedade é modificado. É essencial para manipular efeitos colaterais, como chamadas de API, manipulação de DOM ou integração com bibliotecas externas.

Ele é especialmente útil para interceptar valores e disparar alguma ação — por exemplo, buscar dados assim que uma página é carregada ou sincronizar o estado com uma API de finanças para exibir o saldo atualizado de uma conta.

Vamos ver isso na prática com um exemplo de Aplicação de Dinheiro!

Exemplo prático — Simulador de Investimentos 💰​

Imagine que você está criando uma aplicação para simular o crescimento do saldo de uma conta ao longo do tempo com base em uma taxa de juros. A cada 5 segundos, a aplicação atualiza o saldo com base no rendimento.

useEffect
import React, { useState, useEffect } from "react";

function InvestmentSimulator() {
  const [balance, setBalance] = useState(1000);
  const [interestRate, setInterestRate] = useState(0.05);

  useEffect(() => {
    const interval = setInterval(() => {
      setBalance((prevBalance) => prevBalance * (1 + interestRate));
    }, 5000);

    // Cleanup para evitar vazamentos de memória
    return () => clearInterval(interval);
  }, [interestRate]);

  return (
    <div>
      <h2>Simulador de Investimentos 💸</h2>
      <p>Saldo atual: R$ {balance.toFixed(2)}</p>
      <label>
        Taxa de juros (% ao ciclo):  
        <input
          type="number"
          value={interestRate * 100}
          onChange={(e) => setInterestRate(parseFloat(e.target.value) / 100)}
          step="0.01"
        />
      </label>
    </div>
  );
}

🧠 O que acontece aqui?​

  • Saldo inicial: Começamos com R$ 1000.
  • Taxa de juros: O usuário pode ajustar a taxa, que é aplicada a cada ciclo de 5 segundos.
  • Atualização automática: O saldo é recalculado com base no rendimento, e a tela atualiza automaticamente.
  • Limpeza com clearInterval: Ao desmontar o componente ou mudar a taxa de juros, o intervalo é limpo para evitar múltiplas execuções.

Isso simula o comportamento de uma aplicação financeira, onde o saldo cresce ao longo do tempo!

Como funciona o useEffect?​

O useEffect recebe dois parâmetros:

useEffect(() => {
  // Função que será executada
  return () => {
    // Função de limpeza (opcional)
  };
}, [dependencias]);

Aqui alguns pontos importantes sobre a execução:

  • Função de effect: Executa a lógica desejada (ex: buscar saldo da API, iniciar um timer).
  • Array de dependências: Define quando o efeito será disparado:
  • Array vazio ([]): Executa o efeito apenas na montagem do componente.
  • Com dependências ([interestRate]): Executa o efeito sempre que a taxa de juros mudar.
  • Sem array de dependências: Executa o efeito a cada renderização (cuidado com loops infinitos!).

Cuidados com o useEffect​

  • Efeitos infinitos: Se esquecer de passar o array de dependências, o efeito será executado a cada renderização, podendo travar a aplicação.
  • Funções assíncronas: O useEffect não aceita funções assíncronas diretamente, mas você pode declarar uma função assíncrona dentro dele e chamá-la.
  • Limpeza de recursos: Sempre limpe event listeners, timers ou qualquer recurso externo no retorno do efeito para evitar vazamentos de memória ou múltiplas execuções desnecessárias.

Conclusão​

O useEffect é um dos hooks mais poderosos do React, permitindo controlar efeitos colaterais de maneira simples e direta. No exemplo, usamos para simular o crescimento de um saldo de conta com base em juros, mas as possibilidades são infinitas: buscar transações, sincronizar com APIs bancárias ou até monitorar o comportamento do usuário.

Se você entender bem como o useEffect funciona e quando usar cada configuração, estará preparado para criar aplicações mais dinâmicas, performáticas e fáceis de manter. 🚀

dica

Conheça mais sobre os hooks em:

Referências:​