React Hooks: aprenda a ouvir estados com useEffect

#hooks #react #javascript #frontend

Se você está começando agora sua jornada no ecossistema React, provavelmente já ouviu a palavra "hooks" em algum momento. Os hooks são uma das principais ferramentas do React e servem para manipular e gerenciar estados.

Caso você ainda não saiba o que são estados, vou deixar um link logo abaixo para uma postagem explicando como funciona o useState, ciclos de vida do React e os estados.

React Hooks: definindo e gerenciando estados com useState

O que é useEffect?

UseEffect é um hook do React usado para ouvir modificações ou a iniciação de uma página. No código, o useEffect funciona de forma semelhante a um window.addeventlistener, que é responsável por ouvir alguma parte específica da aplicação.

No React, o useEffect, quando usado como ouvinte, tem o papel de acompanhar as modificações de um state. Veja um exemplo:

import { useEffect } from "react";

const [estado, setEstado] from useState("estado inicial")

useEffect(() => {
    console.log("estado atualizado")
}, [estado])

No caso acima, o useEffect está acompanhando as modificações do estado, que está definido num useState.

Apesar desse exemplo, é possível usar o useEffect sem ser como um ouvinte de estados. Por exemplo, se deixarmos os colchetes vazios, ele fará uma única ação quando a página for iniciada.

useEffect(() => {
    console.log("a página foi iniciada")
}, [])

Esse comportamento é normal caso você precise pegar informações iniciais de uma página, como dados de uma API usando o fetch JavaScript, o Axios ou qualquer outra ferramenta de requisições, por exemplo.

useEffect(() => {
    fetch("/")
        .then(async (res) => await res.json())
}, [])

Usando funções assíncronas

No caso de funções que precisam ser assíncronas, o formato do useEffect muda um pouco, sendo necessário chamar uma nova função dentro do hook.

Como você já deve ter percebido, há uma arrow function na sintaxe do useEffect, no entanto, não é possível aproveitar dela para fazer esse tipo de ação e pode causar erros caso você se esqueça desse detalhe.

useEffect(() => {
    const someFunction = async () => {
        // resto da função
    }

    someFunction()
}, [])

Evitando erros!

Mesmo sendo um hook simples, o useEffect ainda pode apresentar alguns erros. Dentre eles, pode haver um excesso de processos na sua aplicação caso você deixe a sintaxe do useEffect incompleta.

Um erro comum nesse sentido é esquecer os colchetes do useEffect, que fará esse hook ser ativado diversas vezes sem que haja necessidade.

useEffect(() => {
    // função
})

No caso acima, se tivéssemos uma API, por exemplo, nosso acesso poderia ser bloqueado devido a múltiplas requisições.

Além disso, dependendo do processo, a falta dessa parte do useEffect pode causar erros no seu sistema operacional ou navegador, sendo necessário reiniciar a máquina em algumas situações.

Conclusão

Se você chegou até aqui, espero que tenha entendido como o useEffect funciona. Caso tenha alguma dúvida ou feedback sobre o conteúdo, fique a vontade para deixar um comentário nessa postagem.