remount when navigating
hello everyone 👋
we are experiencing an issue were our users click on our navigation bar to stay on the same page and they expect the state to reset
we have seen the reloadDocument option but it would slow down all our navigation so we don't want to do that
we have seen the remountDeps but it would make the route remount every time the deps change and we would lose performance
our use case is to only remount exactly when the user navigates to a page from the menu, when already on that very same page
we were thinking of incrementing a key to force remount but a built-in solution could possibly be cleaner
are there tools we could use in tanstack router or suggestions to cleanly adress the issue ?
12 Replies
deep-jade•17h ago
can you please provide a complete minimal example ?
ratty-blushOP•16h ago
sure
here is a fork of the quick start
https://stackblitz.com/edit/tanstack-router-tzggtris?file=src%2Froutes%2Findex.tsx
we have a state in home, and when navigating to home, from home, the page remains identical and our users expect the page to reset to its default state, hence our need to remount the route component on navigate
in this very simple scenario it's very easy to set a key and increment it to force a remount, but in our app it requires quite a bit more work than if we had the option as a LinkOption, similar to reloadDocument but to remount the route instead of refreshing the entire page
Alexis
StackBlitz
Router Quickstart File Based Example (duplicated) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
ratty-blushOP•16h ago
thanks for taking the time to help us out, you rock 🙏
i've seen you are behind the remountDeps PR, i've looked into it 🙂
deep-jade•15h ago
how does the example show "navigating to home, from home," ?
ratty-blushOP•15h ago
clicking on the "home" link from the "home" page
could add a button with useNavigate, supposed it would be the same
deep-jade•15h ago
so you would need to know the previous route then in remountDeps?
ratty-blushOP•15h ago
could be a solution yes
first idea that came to mind was a pattern similar to "reloadDocument" on the navigation options, as the use case feels very similar
it's also more convenient as you could decide to remount or not "per navigate" and not necessarly at the route level, which could solve more use cases
(i am not API design expert 😅 )
ratty-blushOP•15h ago
deep-jade•15h ago
navigating however affects multiple routes
ratty-blushOP•14h ago
true 👍
it doesn't seem to be a frequent use case as i havent seen other people asking for it, chances are it's not worth touching the library
otherwise if the cost is not too big, getting the previous route for the remountDeps could do the trick
else we could go for a custom approach fitting our use case, with a wrapper that increments a key to force a remount
what would you suggest ? 🙂
deep-jade•14h ago
I am not sure what is really available at this stage of rendering.
I am wondering whether you couldn't do this in a wrapper yourself
i mean the getting the previous route part
you would need to cache the previous matches using some
usePrevious hook and then derive the key based on that and the current matchesratty-blushOP•14h ago
alright, will look into this tomorrow
thanks for your time ! it helps 🙏