vercel / vercel/next.js

window.history.replaceState causes re-render in any component using useParams even if path parameters haven't changed.

Open
#64,064 5 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Linking and Navigating
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/Susannah-Parsons/ReRenderBug

To Reproduce

Install any dependencies
yarn install
Run in development mode
yarn dev
Open http://localhost:3000 with a browser equipped with React dev tools to see the homepage.

Run the React dev tools profiler and record while you click the 'CHANGE HISTORY` button, then stop recording.
The 'CHANGE HISTORY' button just runs the code

window.history.replaceState(null, "", `?test=test`);
Current vs. Expected behavior

I would expect that, because the path params have not changed and nextjs documentation promises that window.history.replaceState() will not cause a rerender of the page, ClientComponent should not re-render.

Instead of this, ClientComponent does re-render.

This is a particular problem for anyone using a zustand store which persists state in the url search params using the window.history.replaceState() function, as any Component using useParams will re-render every time state is saved to the store.

The bug appears to be tied to the use of the useParams hook. Any component using the hook will re-render on window.history.replaceState() even if the path parameters don't change.

Provide environment information
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 14.1.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

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

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

I was unable to test against the latest canary, as my app crashes on start with the latest canary. It is still an issue on 14.2.0-canary.55. It is also an issue on next@14. I can't run next@13 because I am using server actions.

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 linked reproduction: run yarn install, yarn dev, and profile the CHANGE HISTORY button while inspecting the component that uses useParams. Trace how window.history.replaceState reaches the App Router, then verify that changing only the query string does not re-render components whose path parameters are unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.