Estou estudando os hoocks do react e estou com um problema. No useEffect eu aprendi que se você colocar o segundo argumento do useEffect como uma Array vazia ele ira executar sua função do primeiro argumento apenas uma vez, mas no meu caso esta rodando a função duas vezes podem me explicar se isso é normal e como posso resolver para a função rodar apenas quando a pagina é carregada na primeira vez
quando dou f5 na pagina da para ver que o código roda duas vezes
hoje, com a Alura e o Google Gemini
Olá Deivid! Tudo bem?
Pelo que entendi, você está utilizando o useEffect do React com um array vazio como segundo argumento, mas a função está sendo executada duas vezes em vez de apenas uma, como você esperava.
Isso pode acontecer por algumas razões, mas uma delas é que a função está sendo executada uma vez quando o componente é montado e outra vez quando o estado do componente é atualizado. Para evitar que isso aconteça, você pode verificar se o estado mudou antes de executar a função novamente.
Uma forma de fazer isso é utilizar o hook useMemo, que irá memorizar o valor retornado pela função e só irá executá-la novamente quando as dependências mudarem. No seu caso, você pode fazer algo assim:
import { useMemo, useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
const memoizedFunction = useMemo(() => {
console.log('Função executada!');
// Sua função aqui
}, []);
useEffect(() => {
console.log('Componente montado!');
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Dessa forma, a função será executada apenas uma vez, quando o componente for montado.
Espero ter ajudado e bons estudos!