Hovering a Link component causes unnecessary useParams hook re-render.

[florian-lp]

Link to the code that reproduces this issue

https://github.com/florian-lp/next-link-rerender-bug

To Reproduce

1. Run "npm build"
2. Run "npm start"
3. Visit a dynamic page such as "http://localhost:3000/example"
4. Hovering over the NextJS that says "testing" will trigger a re-render for the component displayed below the link.

Current vs. Expected behavior

Observed:
The component uses the useParams() hook to display the current dynamic path and logs this value to the browser console. When the is hovered this causes the useParams() hook to re-render the component, despite the actual path parameters not having been updated.

Expected:
Hovering the should not cause the useParams() hook to unnecessarily re-render when the path parameters have not been updated.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.10
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

App Router

Additional context

This behavior has been present since release 14.0.2-canary.7. In release 14.0.2-canary.6 and below this was working.

This behavior is only present in production builds and not when running "npm run dev".

_NEXT-2434

[kmvan]

I found the same issue! It took me a whole day.
And causes a different _rsc value for prefetch.

[florian-lp]

I have finally had some time to look into this a bit more.
This seems to be related to the ActionQueue implementation introduced in 14.0.2-canary.7. The useParams hook depends on the state of GlobalLayoutRouterContext which gets updated when the AppRouter dispatches an ACTION_PREFETCH action. This dispatch implementation is handled by the ActionQueue. However, I'm unsure what the intended behavior is supposed to be with regards to the updating/reacting to these state updates.

[kmvan]

Version v14.0.4 has been tested and the bug still exists.

[florian-lp]

@ztanner, not sure if the behavior is directly correlated to your code, however, you might be a bit more familiar with the expected behavior surrounding this. Maybe you can have a look?

[Fredkiss3]

Noticed the same issue on our site at work, on my current side project, but also on vercel

Enregistrement.de.l.ecran.2024-01-15.a.14.31.00.mov

[kmvan]

Noticed the same issue on our site at work, on my current side project, but also on vercel

Enregistrement.de.l.ecran.2024-01-15.a.14.31.00.mov

Yes. In production only.

[hemache]

this is partially-fixed in the latest canary version (tested)

[florian-lp]

this is fixed in the latest canary version (tested)

What version did you test? Because the bug still seems to be present as of canary.59 (after running build/in production).

[hemache]

@florian-lp 14.0.5-canary.57

[florian-lp]

@florian-lp 14.0.5-canary.57

Unfortunately seems to be present there as well for me.

[kmvan]

@florian-lp 14.0.5-canary.57

I tested canary.57 and canary.59, no fix. Because the useParams function code has not been edited.

[florian-lp]

I've finally had the time to fix this issue and have opened a pull request for it: #60708.

[github-actions]

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.