Prevent router from re-mounting identical components from different paths
Is it possible to prevent the router from re-mounting the entire page when there are identical components in both routes?
Using ReactRouter, if two pages have a <Box width={x} transition="all 500ms" /> with different x values, the box would just smoothly change it's width. However, using tanstack-router, the box is unmounted and another one is mounted on top of it, breaking any animation.
18 Replies
ratty-blush•13mo ago
we currently use the routeId as
key here which prevents what you want
https://github.com/TanStack/router/blob/14b6042d6145975e1e31fc83281b2c2b0e323369/packages/react-router/src/Match.tsx#L132GitHub
router/packages/react-router/src/Match.tsx at 14b6042d6145975e1e31f...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
ratty-blush•13mo ago
we added this to avoid unncessary re-renders
at the cost of ... remounting upon route change
if you have a better idea, feel free to let me know
cc @Sean Cassiere
ambitious-aquaOP•13mo ago
I think it would be fine if I could choose the key of the route I'm rendering, so that I would be allowed to render different child routes with a same key and prevent unnecessary re-mounts.
This could be useful specially if I try to define states on a page based on query params and still reconciliate the component tree with proper animations.
ratty-blush•13mo ago
I just re-tested it without that key and I don't see more re-renderings than with the key
ratty-blush•13mo ago
so I removed the key in https://github.com/TanStack/router/pull/2237
ratty-blush•13mo ago
@King Witcher you can use the PR built package to check if that would solve your issue
@Sean Cassiere can you please also have a look at this PR?
wise-white•13mo ago
We shouldn’t need the key if our fine grained selectors are correct
ratty-blush•13mo ago
I am playing around with the kitchen sink example
somehow the InvoiceComponent is rendered twice
probably not caused by router I am assuming now
ambitious-aquaOP•13mo ago
ofc, i'll test it here
fair-rose•13mo ago
How's the component rendering?
ratty-blush•13mo ago
same amount as with the key
fair-rose•13mo ago
👍🏼
ambitious-aquaOP•13mo ago
sorry for tge delay, I had a blackout in my city but it worked perfectly now!
thanks for the answer
ratty-blush•13mo ago
it's released already
ambitious-aquaOP•13mo ago
on the main version?
ratty-blush•13mo ago
yes
ratty-blush•13mo ago
GitHub
Release v1.52.1 · TanStack/router
Version 1.52.1 - 8/31/24, 9:10 PM
Changes
Fix
react-router: do not use routeId as key when rendering route component (#2237) (55a2727) by Manuel Schiller
Packages
@tanstack/react-router@1.52.1
@...
ambitious-aquaOP•13mo ago
I was going to ask exactly for that, so thanks again
have a nice weekend