Navigating to the active page causes it to render twice

[zorzysty]

Describe the bug

If you click on a link to a page you're currently on, you it would render two times. Same thing happens if you add/change search params on an active page.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-byhsle?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

1. Make sure you have browser devtools open and can see the console output.
2. Click on "About" link. See it being rendered once.
3. While on "About" page, click on "About" link. See it being rendered twice.
4. While on "About" page, click on "search" link to change search params. See "About" page being rendered twice.

Expected behavior

1. When clicking on a link to a page I'm currently on, I would expect nothing to be rendered at all.
2. When changing search params on an active page, I would expect only the components listening to search param changes to be rendred. And they should only render once.

Screenshots or Videos

https://github.com/TanStack/router/assets/5398733/4aae1771-5c33-4244-ba3c-266a429b5fa2

Platform

• OS: N/A
• Browser: Chrome, Firefox

Additional context

No response

[zorzysty]

@tannerlinsley @schiller-manuel Do you have any guesses on what might be causing this? I'd be happy to work on a fix if you could point me in a right direction.

[Roronoa-Zoroo]

With the new versions, the issue with the search button persists, although it seems to have been resolved for the "About" and "index" links

[cristi-lng]

I don't know if this might be a solution for you, but using the { shouldReload: false, gcTime: 0 } on the create route config seems to fix the excesive re-rendering. But, of course, it changes the way the loaders run.

[SeanCassiere]

You can tighten up your rerenders by wrapping the relevant components using React.memo as mentioned by TkDodo in this message on DIscord.

Here's an example with it: https://stackblitz.com/edit/tanstack-router-dmurum?file=package.json

Edit: Incase the Stackblitz example gets deleted.

const Route = createFileRoute("...")({
    component: React.memo(PageComponent)
})