В Next-JS хук UseEffect() запускается дважды. Я поставил вторым аргументом пустой массив, не помогло. Как это исправить?

Question

[soul7]

В Next-JS хук UseEffect() запускается дважды. Я слышал, что нужно указать пустой массив в качестве второго аргумента, чтобы исправить это в React.
В моем случае в Next-JS это не работает. (Насколько я знаю, Next-JS основан на React).

Я нашел один способ: в next.config.js установить reactStrictMode: false. И это работает, UserEffect вызывается один раз.

Но мне этот способ не подходит, т.к. мне нужно использовать строгий режим React.

_app.js:

import '../styles/globals.css';
import React, { useEffect, useState, useRef } from 'react';

function MyApp({ Component, pageProps }) {
  if (typeof window !== "undefined") {

    useEffect(() => {
      console.log('Component Did Mount') //вызывается дважды :с
    }, [])


  return <Component {...pageProps} />
}


export default MyApp

Answer 1

[wonderingpeanut]

Стрикт мод рендерит каждый компонент дважды. Это происходит только в девелопмент моде, т.е. в продакшн билде этого не будет происходить.

Это никак не исправить, кроме как отключением стрикт мода.

В юзэфект можно добавить условие
if (notAlreadyExecuted) { ... } // do something

Comments

[soul7]

Написал:

useEffect(() => {
    console.log('Component Did Mount')
    if (notAlreadyExecuted) {
      console.log('notAlredyExecuted');
    }
  }, [])

Выдаёт ошибку: ReferenceError: notAlreadyExecuted is not defined

P.S. А в билде useEffect срабатывает один раз.

[wonderingpeanut]

soul7, так ты notAlreadyExecuted объяви)

const [notAlreadyExecuted, setNotAlreadyExecuted] = useState(true);
useEffect(() => {
  if (notAlreadyExecuted) {
    setNotAlreadyExecuted(false);
     ...  // do something 
  } 
  ... // do something else
}, [])