Aprenda como resolver o erro useEffect function must return a cleanup function or nothing, um aviso muito comum de React JS!
Fala programador(a), beleza? Bora aprender mais sobre React!
O React JS, popularmente conhecido por sua simplicidade e flexibilidade, também é notório por seus conceitos mais complexos.
Um dos principais elementos com os quais os desenvolvedores de React precisam se familiarizar é o Hook useEffect.
Este Hook permite que os componentes realizem efeitos colaterais, como busca de dados ou atualização do DOM, em resposta a mudanças de estado ou de props.
No entanto, ao usar o useEffect, pode-se encontrar um erro comum: “useEffect function must return a cleanup function or nothing”.
Neste artigo, vamos analisar o que esse erro significa e como resolvê-lo.
Compreendendo o Hook useEffect
Para entender o erro, primeiro precisamos compreender o que é o Hook useEffect e como ele funciona. O useEffect é um Hook que permite que você realize efeitos colaterais em componentes funcionais.
Você pode pensar nele como uma combinação dos métodos de ciclo de vida componentDidMount, componentDidUpdate e componentWillUnmount das classes de componentes do React.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Você clicou ${count} vezes`;
});
return (
<div>
<p>Você clicou {count} vezes</p>
<button onClick={() => setCount(count + 1)}>
Clique aqui
</button>
</div>
);
}
No exemplo acima, o Hook useEffect atualiza o título do documento após as renderizações do React ao DOM.
O que significa o erro “useEffect function must return a cleanup function or nothing”?
Em suma, o React espera que a função que você passa para o useEffect retorne uma função de limpeza ou nada. Se a função retornar qualquer outra coisa, o React lançará o erro que estamos discutindo.
A função de limpeza é uma parte opcional do useEffect que permite “limpar” ou desfazer qualquer efeito colateral realizado pelo Hook.
Se, por exemplo, você estiver configurando um listener de eventos no useEffect, você deve remover esse listener com uma função de limpeza para evitar efeitos colaterais indesejados quando o componente for desmontado.
O problema surge quando a função useEffect retorna algo que não é uma função ou undefined. Por exemplo, o seguinte código resultará no erro:
useEffect(() => {
const intervalId = setInterval(() => {
console.log('Hello!');
}, 1000);
return intervalId; // Isto está errado!
}, []);
No exemplo acima, estamos retornando o ID do intervalo diretamente, o que é um número, não uma função de limpeza ou undefined. Isso causará o erro “useEffect function must return a cleanup function or nothing”.
Como resolver o erro?
Agora que entendemos o problema, a solução se torna simples. Precisamos assegurar que a função useEffect esteja retornando uma função de limpeza ou nada.
No caso do nosso exemplo anterior, podemos corrigir o erro alterando o código para o seguinte:
useEffect(() => {
const intervalId = setInterval(() => {
console.log('Hello!');
}, 1000);
return () => clearInterval(intervalId); // Agora está correto!
}, []);
Agora, estamos retornando uma função de limpeza que cancela o intervalo quando o componente é desmontado, o que satisfaz as exigências do Hook useEffect.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
O erro “useEffect function must return a cleanup function or nothing” é um lembrete útil do contrato de programação do Hook useEffect no React.
Ao aderir a este contrato, podemos evitar erros e garantir que nosso código funcione como esperado.
Lembre-se sempre de que a função que você passa para o useEffect deve retornar uma função de limpeza para desfazer quaisquer efeitos colaterais ou nada.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.