dynamic import causes parent re-render

[davidgolden]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/reverent-bird-forked-kmsrqh?file=%2Fapp%2Fpage.tsx%3A18%2C2

To Reproduce

I've created a sandbox (https://codesandbox.io/p/devbox/reverent-bird-forked-kmsrqh?file=%2Fapp%2Fpage.tsx%3A18%2C2 - here is the link to the preview: https://kmsrqh-3000.csb.app/) with a minimal reproduction. When a child component is dynamically imported (), its parent component re-renders. You can see this by inspecting the console.log in dev tools. There are 2 renders of the parent component in the above example, not counting re-renders due to strict mode. When the dynamic import is removed in favor of a standard import, there is only one render as expected.

The issue is fixed by adding , but the Next docs imply this should not be necessary:

next/dynamic is a composite of React.lazy()
and Suspense

Current vs. Expected behavior

The current behavior is that when child components are imported dynamically, there are multiple re-renders of their parent components. When dealing with a tree with many children and many dynamically imported components, this results in a very large number of re-renders. The expectation is that so long as a render is not necessitated by normal conditions (like state change), the parent should only render once.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.0-canary.8 // There is a newer canary version (15.3.0-canary.11) available, please upgrade! 
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 4.7.3

Which area(s) are affected? (Select all that apply)

Lazy Loading

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[davidgolden]

I have isolated the issue to this PR: #67014

Potentially, this isn't a bug, but the documentation which implies that Suspense is not needed with next/dynamic is misleading and should be updated.

After adding loading prop to next/dynamic the issue is fixed in next@15.0.0-canary.44 up through next@15.1.7. However, the issue reappears in next@15.2.0-canary.0, and the only changes that seem potentially applicable are upstream in react.