-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
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 boilerplateUsing 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 hereThis 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