I'm reaching out to report a performance issue.

[AndrejNemec]

I'm reaching out to report a performance issue.

The problem involves performance in two scenarios:

1. When updating the search parameters using useNavigation, the entire page, including all layout components and child components, is re-rendered.
2. When there is a layout component with multiple child pages, navigating between these child pages triggers a re-render of the entire page, including all layout components.

In the classic react-router package, this problem does not exist, there it works as expected, parts are rerendered as expected.

Example Link: https://stackblitz.com/edit/vitejs-vite-ifxs98

Originally posted by @AndrejNemec in https://github.com/TanStack/router/discussions/1460

[divmgl]

Do we have an update on this? Also having this issue.

[createdbymahmood]

Wrapping all layouts with React.memo can fix this issue for now.

[AO19]

@tannerlinsley do you know how this issue could be fixed?

[tannerlinsley]

The latest version may have fixed it. We improved performance quite a bit with some more fine grained selectors

[decipher-cs]

The latest version may have fixed it. We improved performance quite a bit with some more fine grained selectors

It didnt'. I'm on v1.45.6 and I'm running into the same problem.

Here's code on how to reproduce it. The onChange fires updateQuery which re-render the entire app. https://github.com/TanStack/router/discussions/1993#discussion-6952871

[gbbrambila]

Not sure if it's totally related, but I had some performance issues when dealing with URL hash updates when using the Default Browser History as mentioned here: https://github.com/TanStack/router/issues/1999

[tunganh-phamba]

We are also having this issue. we migrated to tanstack from react router and found this problem very annoying. this kind of issue is not happening with react routers. we are thinking of rolling back to react router because of this issue.

@last-Programmer That's not the way to communicate. Please show some respect for people who put time and effort into open source. There is already a workaround using React.memo, and you should use it until it's fixed, or go back to whatever you want to use.

[trompx]

Not sure this is exactly related but on the React Example: Basic & Basic File Based (haven't tested others), on every url change, the RootComponent re-render twice. Was struggling with this and after putting memo and useCallback everywhere without success, I'm glad to find out it could be the issue. Versions tested: 1.45.7 & 1.45.11

[trompx]

I just upgraded to 1.45.14. While there was a double rerender in my root component when using const router = useRouter() there is now none at all, so it breaks my app.

Is it expected that we get no rerender at all now on new url navigation and should use another hook for a single rerender?

[schiller-manuel]

@trompx can you please share a complete minimal example?

[trompx]

@schiller-manuel

1. Go to https://tanstack.com/router/latest/docs/framework/react/examples/basic
2. Import useRouter and add the following at the beginning of the function RootComponent() {:

  const router = useRouter();
  console.log("ROOT", router)

3. Check console: only renders "ROOT" on the first page

[schiller-manuel]

useRouter is not reactive, we need to document this better. use useRouterState instead: https://stackblitz.com/edit/tanstack-router-m1avwu?file=src%2Fmain.tsx&preset=node

[TkDodo]

useRouter is like useQueryClient. Somehow, there most people understand that it's not reactive. Maybe it should be useRouterInstance or something?