Next dev with React 18, Always render twice

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.0
      npm: 8.5.5
      Yarn: 1.22.17
      pnpm: 6.31.0
    Relevant packages:
      next: 12.1.4
      react: 18.0.0
      react-dom: 18.0.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Hi. When use next dev with react 18, page always rendered twice.

// the project is just result of `create-next-app`
// pages/index.js
import { useEffect, useState } from 'react'

export default function Home() {
  console.log('render')

  const [state, setState] = useState(() => {
    console.log('state initialize');
    return 'state';
  })

  useEffect(() => {
    return () => {
      console.log('unmounted')
    }
  }, [])

  return (
    <div>
      Home
    </div>
  )
}

even lazy state intialize twice, and unmount last. So I think it is not remounted, but create twice. However, next build && next start is okay and render once.

Thanks

Expected Behavior

Render, and Initialize Once with next dev

To Reproduce

• create-next-app
• npm run dev

[MonstraG]

React 18’s release blogpost talks about this behavior in section New Strict Mode Behaviors

[GLObus303]

Is it possible that you are wrapping the App in StrictMode? That would explain that double render.

I can reproduce the same double calling of the hooks in this simple demo -> https://codesandbox.io/s/late-leaf-k5qh9k?file=/components/Test.js when wrapping the App in StrictMode

This is after full page reload:

We have just run into a similar issue with the “useUpdateEffect” construct in our Next v12 + React v18 project. Is it expected?