-
Notifications
You must be signed in to change notification settings - Fork 27.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hovering a prefetch Link causes unnecessary re-render of the error boundary in production #63159
Comments
@ChaserZ98 Can confirm this is an issue. We are taking a look! |
@samcx Thanks! Let me know if any details are needed for this issue. Looking forward to a fix! |
Since `AppRouterState` is promise-based (so we can `use` the values and suspend in render), the state itself isn't stable between renders. Each action corresponds with a new Promise object. When a link is hovered, a prefetch action is dispatched, even if the prefetch never happens (for example, if there's already a prefetch entry in the cache, and it doesn't need to prefetch again). In other words, the prefetch action will be dispatched but won't necessarily change the state. This means that these no-op actions that don't actually change the state values will trigger a re-render. Most of the context providers in `AppRouter` are memoized with the exception of `LayoutRouter` context. This PR memoizes those values so that consumers are only notified of meaningful updates. Fixes #63159 Closes NEXT-3127
@ChaserZ98 This should be |
@samcx I did the check in |
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Link to the code that reproduces this issue
https://github.com/ChaserZ98/next-error-link-rerender-bug
To Reproduce
npm run build
npm run start
Current vs. Expected behavior
Current behavior
console.log("error render")
in the error boundary so that the console will printerror render
each time the error boundary is rendered. So in this case, the users will see the console printingerror render
when they hovering any prefetch Link.npm run dev
.Expected behavior
Hovering any Link that does not trigger a state change should not cause the error boundary to re-render, no matter it is a prefetch link or non-prefetch Link.
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router
Which stage(s) are affected? (Select all that apply)
next build (local), next start (local)
Additional context
The behavior is present in release 14.0.2-canary.7 and above.
A similar issue might be #58788 . But the fix for that issue isn't working for this one since such behavior still presents in the latest canary release, which is 14.2.0-canary.15 by the time this issue is posted.
The text was updated successfully, but these errors were encountered: