Por que meu useEffect está rodando duas vezes? (e o fetch também)
Boa noite, pessoal! Estou fazendo um projeto de portfólio (uma lista de filmes consumindo uma API pública) e notei uma coisa estranha: o console.log dentro do useEffect aparece duas vezes, e na aba Network o fetch também é feito duas vezes. useEffect(() => { console.log('buscando filmes') fetch('https://api.exemplo.com/filmes?pagina=' + pagina) .then(res => res.json()) .then(dados => setFilmes(dados.resultados)) },…
Accepted answer
Boa noite, Lari! Você não está fazendo nada errado, uai kkkk. Isso é o React.StrictMode. Olha teu main.jsx (ou index.js): deve ter o <App /> dentro de <React.StrictMode>. Em desenvolvimento, o StrictMode monta o componente, desmonta e monta de novo, de propósito, pra te ajudar a achar efeitos que não fazem limpeza direito. Por isso o log aparece duas vezes. Em produção (npm run build) isso NÃO acontece, roda uma vez só. Não tira o StrictMode, ele é teu amigo. O que vale a pena é colocar a limpeza no efeito, porque se o usuário trocar de página rápido a resposta antiga pode chegar depois da nova e sobrescrever: useEffect(() => { const controller = new AbortController() fetch(url, { signal: controller.signal }) .then(res => res.json()) .then(dados => setFilmes(dados.resultados)) .catch(err => { if (err.name !== 'AbortError') console.error(err) }) return () => controller.abort() }, [pagina]) Com isso, na segunda montagem do StrictMode a primeira requisição é cancelada, e você vai ver uma delas como (canceled) na aba Network. Faz sentido? Qualquer coisa me chama.