-
Notifications
You must be signed in to change notification settings - Fork 29.3k
Open
Labels
RuntimeRelated to Node.js or Edge Runtime with Next.js.Related to Node.js or Edge Runtime with Next.js.bugIssue was opened via the bug report template.Issue was opened via the bug report template.linear: nextConfirmed issue that is tracked by the Next.js team.Confirmed issue that is tracked by the Next.js team.
Description
Link to the code that reproduces this issue
To Reproduce
- Clone the repo, check out the PR's branch.
pnpm install
.cd examples/with-next
.pnpm dev
- Open the application URL in the browser.
- Open the DevTools, select the "Console" tab.
- Click the "Fetch movies" button on the page. See the list of fetched movies (these are coming from mocks). See a single log output from MSW about the intercepted GraphQL query.
- Go to
src/mocks/handlers.ts
. Change the payload of thegraphql.query()
handler (e.g. remove any word from a movie title). - Save the changes.
- Back in the browser, click "Fetch movies" again.
- See two logs for the same GraphQL request.
Current vs. Expected behavior
Current behavior
The entire MovieList
component gets re-rendered a bunch of times on hot update to handlers.ts
. Re-rendering is expected, but it looks like Next.js re-applies event listeners to the same button multiple times.
This is not an MSW issue. You can log something in the MovieList
component manually, and see that it re-renders quite a lot. I suspect during those re-renderings, the onClick
listener gets applied more than it needs to.
The number of times the listener is excessively applied is directly proportionate to the number of HMR changes issued (e.g. 1 change = 2 listeners; 2 changes = 3 listeners; etc).
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:28:58 PST 2023; root:xnu-10002.81.5~7/RELEASE_X86_64
Available memory (MB): 65536
Available CPU cores: 16
Binaries:
Node: 18.19.0
npm: 10.2.3
Yarn: 1.22.10
pnpm: 9.6.0
Relevant Packages:
next: 15.0.0-canary.121 // Latest available version is detected (15.0.0-canary.121).
eslint-config-next: N/A
react: 19.0.0-rc-14a4699f-20240725
react-dom: 19.0.0-rc-14a4699f-20240725
typescript: 5.3.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Developer Experience, Runtime
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
No response
stramel, laurmurclar, franky47, nphmuller, jdpnielsen and 47 more
Metadata
Metadata
Assignees
Labels
RuntimeRelated to Node.js or Edge Runtime with Next.js.Related to Node.js or Edge Runtime with Next.js.bugIssue was opened via the bug report template.Issue was opened via the bug report template.linear: nextConfirmed issue that is tracked by the Next.js team.Confirmed issue that is tracked by the Next.js team.