Skip to content

Double render on browser forward/back navigation with useParams or useSearch hooks #2631

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
jjonesrs opened this issue Oct 24, 2024 · 0 comments · Fixed by #2969
Closed

Double render on browser forward/back navigation with useParams or useSearch hooks #2631

jjonesrs opened this issue Oct 24, 2024 · 0 comments · Fixed by #2969

Comments

@jjonesrs
Copy link

Which project does this relate to?

Router

Describe the bug

Double rendering occurs on browser forward/back navigation when using useParams or useSearch hooks. This issue persists even with memoization and affects both Route.useXXX and raw useXXX variants.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-ujjze6?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

  1. Open the provided reproducer.
  2. Open the browser's developer tools console.
  3. Click on the "Search A" and "Search B" links. Observe that only one log entry is printed per navigation.
  4. Use the browser's forward and back buttons to navigate between pages a few times. Notice that two duplicate log entries are printed per navigation.
  5. Navigate to the About page and repeat steps 3-4 to observe the same behavior with params instead of search.

Expected behavior

Components should render only once when navigating using browser forward/back buttons, consistent with the behavior observed when clicking links for navigation.

Screenshots or Videos

No response

Platform

N/A

Additional context

  • Components do not double render if neither useParams nor useSearch hooks are used.
  • The issue only occurs when using browser forward/back navigation, not when clicking links.
  • validateSearch, search middlewares, loaderDeps, and loader do not seem to affect the issue.
  • Preload settings also do not seem to affect the issue.
  • Similar issue: Double Renders On Navigate #1825
schiller-manuel added a commit that referenced this issue Dec 9, 2024
schiller-manuel added a commit that referenced this issue Dec 9, 2024
schiller-manuel added a commit that referenced this issue Dec 9, 2024
* fix(react-router): fix transitions

fixes #2631
fixes #2082

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant