Como mudar um estado dentro do useEffect do React JS

Neste artigo você aprenderá a como mudar um estado dentro do useEffect, utilizando o hook useState para isso

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Em aplicações React, frequentemente precisamos combinar lógicas relacionadas ao ciclo de vida de um componente com o gerenciamento de seu estado interno.

O hook useEffect permite que realizemos efeitos colaterais em componentes funcionais, enquanto o useState é utilizado para gerenciar o estado.

Neste artigo, vamos mergulhar em como modificar o estado de um componente dentro do useEffect.

Entendendo o useEffect

O que é useEffect?

O useEffect é um hook introduzido no React 16.8, que permite executar efeitos colaterais em componentes funcionais.

Se você estiver familiarizado com as classes do React, pode pensar no useEffect como uma combinação dos métodos componentDidMount, componentDidUpdate e componentWillUnmount.

Quando usar o useEffect?

O useEffect é especialmente útil quando:

• Precisamos realizar chamadas de API ao montar um componente.
• Queremos adicionar ou remover event listeners.
• Desejamos manipular o DOM diretamente.
• Queremos realizar ações baseadas em mudanças no estado ou nas props.

useState: Um rápido lembrete

Antes de prosseguirmos, é importante lembrar rapidamente do hook useState, que permite que componentes funcionais tenham estados.

const [estado, setEstado] = useState(valorInicial);

Atualizando o Estado dentro do useEffect

Exemplo Básico

Vamos supor que temos um componente que precisa carregar dados de uma API quando é montado e queremos atualizar o estado com esses dados.

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

const ExemploComponente = () => {
  const [dados, setDados] = useState([]);

  useEffect(() => {
    fetch('https://api.exemplo.com/dados')
      .then(response => response.json())
      .then(dadosRecebidos => {
        setDados(dadosRecebidos);
      });
  }, []);

  return (
    <div>
      {dados.map(dado => (
        <p key={dado.id}>{dado.nome}</p>
      ))}
    </div>
  );
};

No exemplo acima, utilizamos o useEffect para realizar a chamada de API quando o componente é montado ([] como segundo argumento do useEffect garante isso). E, dentro do useEffect, atualizamos o estado com o método setDados.

Considerações importantes

1. Evite loops infinitos: Sempre que mudamos o estado dentro do useEffect, há risco de causar um loop infinito. Por isso, é vital entender as dependências do useEffect. No exemplo acima, o [] garante que o efeito seja executado apenas uma vez, quando o componente é montado.
2. Lidando com efeitos colaterais: Se você estiver configurando listeners ou subscrevendo a algum serviço, lembre-se de fazer a limpeza no retorno do useEffect para evitar vazamentos de memória.

useEffect(() => {
  const handleResize = () => {
    // ...
  }

  window.addEventListener('resize', handleResize);

  // Limpeza
  return () => {
    window.removeEventListener('resize', handleResize);
  }
}, []);

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

O useEffect e o useState são ferramentas poderosas que, quando combinadas, oferecem grande flexibilidade para lidar com efeitos colaterais e estado em componentes funcionais.

Ao atualizar o estado dentro do useEffect, é crucial entender as dependências do efeito e garantir que não estejamos inadvertidamente causando loops infinitos ou outros comportamentos indesejados.

Ao trabalhar com esses hooks, sempre lembre-se de seguir as melhores práticas, como lidar corretamente com efeitos colaterais e utilizar a abordagem mais otimizada e moderna para obter resultados eficientes e confiáveis em suas aplicações React.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.