useParams causes unnecessary renders in parent routes

[AshotN]

Which project does this relate to?

Router

Describe the bug

Params changed in child components seem to cause parent components subscribed to useParams to re-render.

The bug occurs in the component $artist.tsx when navigating between child routes (album.tsx).

The parent doesn't have access to the child param as surfaced by TypeScript. The artist component re-renders every time you switch between albums, even though it only uses the parameter $artist

Workaround

The example repo shows the solution in a commented line:

const artist = Route.useParams({ select: ({ artist }) => artist }); // Prevents unnecessary re-renders, but is boilerplate

Using the select option tells the hook to only subscribe to changes fixes the issue but is boilerplate that the developer has to remember.

Your Example Website or App

https://github.com/AshotN/TanStack-Router-useParamsBug

Steps to Reproduce the Bug or Issue

The issue happens by default when using Route.useParams without a select function to narrow down the selector

//$artist.tsx
const { artist } = Route.useParams(); // Will re-render even if album changes, even though album is in-accessible here

This hook subscribes to all parameter changes in the route tree, including child route parameters . So when navigating from /Some artist/Album1 to /Some artist/Album2, the hook triggers a re-render even though the $artist parameter didn't change.

Expected behavior

Navigating between albums (Album1 → Album2) should NOT cause the parent artist component to re-render since the parameter remains the same $artist

Screenshots or Videos

The default behavior const { artist } = Route.useParams();

Default.Behavior.webm

With const artist = Route.useParams({ select: ({ artist }) => artist });

WithSelect.webm

Platform

• Router / Start Version: 1.131.27
• OS: Linux
• Browser: Firefox
• Browser Version: 141.0.3
• Bundler: vite
• Bundler Version: 6.3.5

Additional context

No response

[nlynzaad]

closed in 1.131.36