vercel / vercel/next.js

[NEXT-1044] When layout is RSC, all client components used in it will rerender if they are wrapped in `React.memo`

Open
#44,901 13 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

React
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
  1. Go here: https://stackblitz.com/edit/vercel-next-js-wzcg3h?file=app%2Fabout%2Fpage.tsx
  2. npm run build (the sandbox starts by default in dev mode, that doesn't work, don't know why)
  3. npm run start
  4. Click on "Go to About Page"
  5. See the logs:
    image
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

NEXT-1044

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.