[NEXT-1044] When layout is RSC, all client components used in it will rerender if they are wrapped in `React.memo`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: Ubuntu 20.04.0 LTS Sun Jan 15 2023 18:53:52 GMT+0200 (Eastern European Standard Time)
Binaries:
Node: 16.14.2
npm: 7.17.0
Yarn: 1.22.19
pnpm: 7.13.6
Relevant packages:
next: 13.1.3-canary.0
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://stackblitz.com/edit/vercel-next-js-wzcg3h?file=app/about/page.tsx
To Reproduce
- Go here: https://stackblitz.com/edit/vercel-next-js-wzcg3h?file=app%2Fabout%2Fpage.tsx
- npm run build (the sandbox starts by default in dev mode, that doesn't work, don't know why)
- npm run start
- Click on "Go to About Page"
- See the logs:

Describe the Bug
The client components from the root layout are unmounted and mounted again when you navigate through Links.
In the following sandbox, I created two pages HomePage + AboutPage.
There you will see a root layout having the TestComponent in it.
In the test component, I made an effect where I logged mount and unmount triggers.
This issue is reproducible in build mode.
This issue can also be reproducible in dev mode if the reactStrictMode is true (default).
(I posted on this thread some time ago: https://github.com/vercel/next.js/issues/42164#issuecomment-1304849872)
Expected Behavior
The client components from the Rootlayout should not unmount on link navigation.
Which browser are you using? (if relevant)
Chrome
How are you deploying your application? (if relevant)
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the StackBlitz reproduction at app/about/page.tsx, run npm run build and npm run start, then inspect the root layout and TestComponent while navigating between HomePage and AboutPage. Done means the root-layout client component does not unmount and mount again on link navigation, including the reported build-mode case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100