router
router copied to clipboard
TanStack
Entire app re-mounted 6 times on navigate and on every link hover...
Describe the bug
When clicking on a link, the entire root component gets re-rendered and re-mounted 6 times. Also, hovering on a link causes it to get re-mounted as well.
This means that absolutely every (layout) effect for every component in the entire application will get executed 6 times.
That happening is... uhh, well, "bad" would be an understatement :smiling_face_with_tear:
This issue is triggered everywhere it seems, the simple examples in the docs and also in my own app. Latest npm version of package.
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-bxtshb?file=src%2Froutes%2F__root.tsx
Steps to Reproduce the Bug or Issue
Open the example on StackBlitz.
Open the browser console and watch the messages generated by the useLogRenders() function when hovering and clicking links.
Expected behavior
The component should only be mounted once, and preferably, rendered once (although the latter can be worked around in client code with various memo hacks).
Screenshots or Videos
16:12:42.256 posts.tsx:27 Fetching posts...
16:12:42.257 __root.tsx:18 render RootComponent v10
16:12:42.261 __root.tsx:22 unmounted RootComponent v9
16:12:42.261 __root.tsx:20 mounted RootComponent v10
16:12:42.261 __root.tsx:18 render RootComponent v11
16:12:42.264 __root.tsx:22 unmounted RootComponent v10
16:12:42.264 __root.tsx:20 mounted RootComponent v11
16:12:42.627 __root.tsx:18 render RootComponent v12
16:12:42.638 __root.tsx:22 unmounted RootComponent v11
16:12:42.638 __root.tsx:20 mounted RootComponent v12
16:12:42.639 __root.tsx:18 render RootComponent v13
16:12:42.642 __root.tsx:22 unmounted RootComponent v12
16:12:42.642 __root.tsx:20 mounted RootComponent v13
16:12:42.642 __root.tsx:18 render RootComponent v14
16:12:42.645 __root.tsx:22 unmounted RootComponent v13
16:12:42.645 __root.tsx:20 mounted RootComponent v14
16:12:42.811 __root.tsx:18 render RootComponent v15
16:12:42.818 __root.tsx:22 unmounted RootComponent v14
16:12:42.819 __root.tsx:20 mounted RootComponent v15
Platform
- Browser: any (tested on Chrome, Firefox)
Additional context
No response
It’s powered my fine grained selectors, so my best guess is a surprise regression. I’ll validate and fix this asap today.
I don't know if this is related but I cannot click a link inside a TanStack Table, you can see the link, and cells rendering infinitely.
https://github.com/TanStack/router/assets/1166143/a5fe8048-102f-49f7-9130-2bd0075f3b56
This bug can theoretically cause infinite loops via the hover re-mount – in case a component instantiates their <Link> subcomponents after the initial mount (which would cause their hover to get triggered, which would cause them to get re-mounted, then triggered etc.)
...so maybe related?
I am seeing the same when I navigate using useNavigate hook.
const navigate = useNavigate({
from: Route.fullPath,
});
const openDrawer = (id: string) => {
navigate({
search: (prev) => ({ ...prev, id }),
replace: true,
});
};
const closeDrawer = () => {
navigate({
search: (prev) => ({ ...prev, id: undefined }),
replace: true,
});
};
Does anybody now what's the latest version not affected by this bug?
No but if you can find it out, it would surely speed up the fix
@schiller-manuel @giilbert This seems to be only partially resolved (testing on 1.15.19). If you click on a link to a page you're currently on, you still get double renders (happens also when changing search prarams). You can see that here: https://stackblitz.com/edit/tanstack-router-byhsle?file=src%2Fmain.tsx
https://github.com/TanStack/router/assets/5398733/4aae1771-5c33-4244-ba3c-266a429b5fa2
I created a ticket for the issue mentioned above: https://github.com/TanStack/router/issues/1156