Se o seu aplicativo está se comportando de forma estranha após a atualização para o React 18, o comportamento padrão useEffectmudou para executá-lo 2 vezes .
Apenas no modo de desenvolvimento , mas este é o modo em que todos criam seus aplicativos.
E apenas no modo estrito , mas agora esse é o padrão para aplicativos criados usando create-react-appou Next.js.
Há razões para isso.
Não é um problema do seu código – é como as coisas funcionam agora no React.
A única maneira de desabilitar esse comportamento é desabilitar o modo estrito .
O modo estrito é importante, portanto, essa é uma solução temporária até que você possa corrigir qualquer problema introduzido por essa alteração.
Você pode fazer isso no Next.js adicionando a opção
reactStrictMode: false
em seu next.config.jsarquivo.
Em create-react-appvocê pode ir no seu arquivo index.js e remover o componente de ordem superior StrictMode, de:
import React, StrictMode from 'react';
import createRoot from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
para
import React from 'react';
import createRoot from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<App />
);
LEIA TAMBÉM: