Como Usar useEffect

O que é UseEffect?

Imagine que você está programando uma interface web que consome dados fora do seu front end. Talvez de uma API.

Aí você chega ao seguinte pensamento:

Quero guardar um valor e atualizar a interface quando ele mudar.

É justamente para isso que serve o useEffect. Ele é usado quando algum componente precisa executar um efeito colateral depois de uma renderização, geralmente sincronizando algo externo ao React com o estado/props do componente.

Efeitos colaterais

Uma função tem um efeito colateral quando, além de, por exemplo, calcular um valor, ela causa alguma mudança ou interação fora do próprio cálculo. O useEffect é um hook que representa o efeito colateral causado pela renderização ou por mudanças nas dependências do componente.

Parâmetros

A assinatura conceitual do useEffect é:

useEffect(effect, dependencies)

Ele recebe 2 parâmetros:

• effect: A função que será executada como efeito;
• dependencies: Um array opcional que determina quando o efeito deve ser executado novamente.

Retorno

Diferente do useState, o useEffect não tem um retorno, mas a função passada como parâmetro pode retornar uma função de limpeza.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("oi");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

Este código cria um timer que executa um console.log(“oi”) a cada 1 segundo enquanto o componente estiver montado. Quando o componente desmonta, a função de limpeza clearInterval(timer) é chamada, encerrando o timer.

O ciclo de vida dos componentes do React

Podemos simplificar o ciclo de vida do componente React em 3 fases:

• Mount: É quando o componente aparece pela primeira vez
• Update: Ocorre quando o componente sofre alguma mudança que causa uma nova renderização como
  • Mudanças de state
  • Mudanças de props
  • Mudanças de contexto
  • Renderizações causadas pelo elemento pai
• Unmount: Ocorre quando o componente deixa de existir na árvore do React.

Para componentes de classe, podemos acessar esses métodos dentro do ciclo de vida.

Para componentes funcionais, conseguimos gerenciar esse ciclo de vida a partir do hook useEffect.

componentDidMount

Em componente de classe

  class App extends React.Component {
    componentDidMount() {
      console.log('montou');
    }

    render() {
      return <h1>Olá</h1>;
    }
  }

Com useEffect

function App(){
  useEffect(() => {
    console.log('montou');
  }, []);
}

O [] é importante para fazer a função executar apenas na montagem inicial.

componentDidUpdate

Em componente de classe

  componentDidUpdate() {
    console.log('atualizou');
  }

Com useEffect

useEffect(() => {
  console.log('atualizou');
});

Sem o array de dependências, ele vai executar em toda renderização.

useEffect(() => {
  console.log('contador mudou');
}, [contador]);

Neste caso, ele executa quando o valor do contador muda.

componentWillUnmount

Em componente de classe

componentWillUnmount() {
  console.log('vai desmontar');
}

Com useEffect

useEffect(() => {
  return () => {
    console.log('vai desmontar');
  };
}, []);

O retorno da função é o cleanup.

Exemplos

Neste exemplo, a cor escura é ativada sempre que ocorre atualização no contador.

Neste exemplo, o setSaudacoes é passado como prop para o componente DigaOi. O useEffect cria um timer ao ser montado que cria uma nova saudação a cada segundo. Ao ser desmontado, esse timer é limpo. Experimente remover o clearInterval. Um bug curioso causará a criação de novos timers sem limpar o timer ao desmontar o componente.