useEffect being called twice in Nextjs Typescript app [duplicate]

Question

I have a simple useEffect function setup with the brackets like so:

  useEffect(() => {
    console.log('hello')
    getTransactions()
  }, [])

However when I run my app, it prints two hellos in the console. Any idea why?

Even if I add something like this, two hellos print still.

  const [useEffectCalled, setUseEffectCalled] = useState<Boolean>(false)

  useEffect(() => {
    console.log('hello')
    if (!useEffectCalled) {
      getTransactions()
    }
    setUseEffectCalled(true)
  }, [])

Maybe something in getTransactions is causing a complete re-loading (or remounting) of the component, triggering it once again? Comment it out and see if it still triggers twice, try to locate where the problem is exactly. — cSharp
– cSharp, Commented Apr 12, 2022 at 0:17
@cSharp commented out getTransactions just including the console.log in useEffect and same thing, logged two hellos...strangest thing — cormacncheese
– cormacncheese, Commented Apr 12, 2022 at 0:18
Even if it is in strict mode, useEffect with no dependency, will only run once unless your component remounts. — vighnesh153
– vighnesh153, Commented Apr 12, 2022 at 3:11
For a in depth answer stackoverflow.com/questions/72238175/…. — Youssouf Oumar
– Youssouf Oumar, Commented Sep 21, 2022 at 15:59

cormacncheese · Accepted Answer · 2022-04-12 00:33:48Z

68

Thanks to Joel Hager I was able to get it working by editing by next.config.js to

const nextConfig = {
  reactStrictMode: false,
};

and restarting my app.

answered Apr 12, 2022 at 0:33

cormacncheese

1,7793 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ander Over a year ago

I also got duplicated execution of useEffect and disabling it also worked for me, but I hate not knowing why. ReactStrictMode is supposed to help highlighting potential problems, not create them. Does anyone understand why is this happening? I am using next v12.1.6 + react v18.1.0

Opemipo Bolaji Over a year ago

You shouldn't forget to restart your server as well. next.config.js is applied on server startup.

Youssouf Oumar Over a year ago

You shouldn't be systematically deactivating StrictMode. See stackoverflow.com/questions/72238175/…

Pencilcheck Over a year ago

still happening with next v13, internet is saying this is a react issue so i'm not sure what is going on and the solution for it. disabling strict mode sounds wrong.

fisch Over a year ago

@Ander maybe you use rewrite stackoverflow.com/questions/72302343/…

|

Collectives™ on Stack Overflow

useEffect being called twice in Nextjs Typescript app [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related