Skip to content

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

@jjonesrs

Description

@jjonesrs

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions