Skip to main content

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. 🚀

tip

Conheça mais sobre os hooks em:

Referências:​