Por que o useEffect é executado duas vezes?

O React 18 lançado em março de 2022 mudou o comportamento padrão do useEffect().

Eu nem percebi no começo, lendo o post de lançamento do React 18, enterrado ao longo de um monte de novos recursos.

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 />
);