nextjs - 💡(How to fix) Fix Excessive layout client component child rendering while waiting for page client component [4 comments, 2 participants]

Link to the code that reproduces this issue

https://github.com/OblikStudio/test-nextjs/tree/issue-excessive-renders

To Reproduce

Here's the issue:

1. Put a use client component inside layout.tsx
2. Put another use client component inside page.tsx
3. Make sure that the page JS chuck takes longer to load
4. The layout child will excessively render until the page chunk loads

This is reproducible with a fresh installation of Next.js 16.1.6:

1. Clone the repo
2. npm run build
3. npm run start
4. Open Chrome DevTools
5. Disable Cache
6. Navigate to http://localhost:3000
7. You'll see a bunch of logs "rendering LayoutChild"
8. The logs stop only after seeing "rendering PageChild"
9. If you enable network throttling, the issue gets worse

Here's what happens:

And here's a video:

https://github.com/user-attachments/assets/bfc1ffaa-0617-4e4f-ac31-5d644a76eb7d

Current vs. Expected behavior

Current behavior is that Next.js re-renders any client components inside a layout.tsx until the JS chunk for the corresponding route is downloaded. If for some reason this never happens (like blocking the request URL), Next.js gets stuck in an infinite loop.

Expected behavior is to render the layout child once and when the route chunk is downloaded — to render the page child.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Wed Nov  5 21:34:00 PST 2025; root:xnu-11417.140.69.705.2~1/RELEASE_ARM64_T8132
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.21.0
  npm: 10.9.4
  Yarn: N/A
  pnpm: 10.19.0
Relevant Packages:
  next: 16.1.6 // Latest available version is detected (16.1.6).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

React

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

next start (local)

Additional context

This is reproducible on Next.js 15.4.10 too. It's where I initially spotted the issue, in my actual app. I thought I was doing something wrong and was going crazy, until I stripped everything down to a couple of files and reproduced it in a fresh installation, and even on the latest version of Next as well.

It seems like there's some sort of race condition that makes React go crazy until the rest of the JS gets loaded. It was tricky to debug because the issue is affected by network conditions, so if you test locally and your JS chunk is small, the layout child will render just once, as expected. But if you turn on network throttling (or you put crap in your JS chunk to make it larger), you'll start seeing the issue.