Lots-o-re-rendering?
Every component in the route tree seems to re-render twice on every page nav. Is this the expected behavior?
On version 0.0.1-beta.119
37 Replies
genetic-orange•3y ago
This is not expected
I have a refactor I'm polishing up that should alleviate this
other-emeraldOP•3y ago
👌 shaweet - ah is this to do with the sync external store stuff?
genetic-orange•3y ago
Yep
Did you try it out yet?
other-emeraldOP•3y ago
not quite yet - hopefully today or tomorrow
other-emeraldOP•3y ago
Soo good news first - upgraded to latest (beta 133) and just had to adjust for the new RouterContext class and things are generally working! Not so good news, the re-rendering issue is still present. Of note, it also occurs wen pre-loading (note in gif how just hovering over these links causes the entire route tree to re-render a bunch of times).
If it's of any help, I'm using this repo to explore tanstack router - https://github.com/marbemac/stack/blob/main/apps/writing-react-tr/src/router.tsx. Routes are in the
routes folder. Can start everything with yarn and yarn workspace writing-react-tr dev.
If you don't already have a hunch re what the issue is, I can prob set aside a little time today to dig into the router internals just lmk.
genetic-orange•3y ago
My hunch is that it's because of React Context
other-emeraldOP•3y ago
on my end, or within router?
genetic-orange•3y ago
Moving to suspense + transitions, I had to say the magic incantation of
useState + React context
In the router
This means that fine-grained subscriptions in hooks and components suffered
Right now it's just a big context value in RouterProviderother-emeraldOP•3y ago
ahh, yes
genetic-orange•3y ago
Which is listening to every single update from the Store
other-emeraldOP•3y ago
that'll prob do it - that top level context, if that's where everything is
genetic-orange•3y ago
If it's any consolation, this is essentially how every other router works as well 😦
I have ideas to get around this
But it requires making every single hook and component a suspense/concurrent-safe subscriber to the store
genetic-orange•3y ago
GitHub
router/packages/router/src/react.tsx at f2074e95f96478f4855319bf23b...
🤖 Type-safe router w/ built-in caching & URL state management for React, Preact, and friends - TanStack/router
other-emeraldOP•3y ago
ah, hmm - maybe it was just my wishful thinking that I had hoped this wasn't the standard ha
genetic-orange•3y ago
Unfortunately, yes
other-emeraldOP•3y ago
It's not a huge deal, but if solving this in the future would require API changes, might be worth considering now. otherwise yeah I understand if you don't have the time atm
genetic-orange•3y ago
Agreed
A stop-gap solution would be to memoize the context value
... actually that wouldn't work either
other-emeraldOP•3y ago
need fine grain reactive state that is compatible w suspense (ah... solid haha 😢)
genetic-orange•3y ago
tell me about it
other-emeraldOP•3y ago
not sure what your stance is re bringing in 3rd party lib - could always lean on something like valtio - would add ~3kb though
genetic-orange•3y ago
I think it'd be better to replicate the functionality with only the features we need
Probably only add 0.5 kb
It's honestly pretty close already with Store
other-emeraldOP•3y ago
ok, if I can find some time and you aren't already planning to take a crack at it, mind if I experiment w a solution?
genetic-orange•3y ago
Feel free
I'm going to start playing around right now
other-emeraldOP•3y ago
haha ok! he's got the bug
i'll let you know if i manage to take a crack at it as well
genetic-orange•3y ago
sounds good
foreign-sapphire•3y ago
@Tanner Linsley Is this the problem you are discussing here also responsible for re-rendering the parent components everytime a
<Link> component is hovered?genetic-orange•3y ago
This depends on a lot of things
Are you prefetching on hover intent?
foreign-sapphire•3y ago
Ohhh yes
genetic-orange•3y ago
Is that prefetch state being used up high?
foreign-sapphire•3y ago
That was it
genetic-orange•3y ago
At some point, the rerender needs to happen
If you are subscribed to it 😉
foreign-sapphire•3y ago
Ya totally I I have auto preload on
so I dont have an explicity preload prop
genetic-orange•3y ago
yep
foreign-sapphire•3y ago
Thank you! I really appreicate the quick responses you have on here its great
genetic-orange•3y ago
🙂
Love discord for that reason
other-emeraldOP•3y ago
Hi @Tanner Linsley, just circling back here again. Wondering if your exploration from a while ago yielded any ideas or plans?
I fired up the latest and added some logs to the root, posts, and post route of the
with-react-query example app and it looks like the re-rendering is still pretty excessive. Not a huge deal with a small example app, but I'm a bit more nervous re how this will work when router is used in a large app with deeper nesting / more complicated routes and layouts.
FWIW I did end up testing Remix/react-router, and they don't seem to re-render the route hierarchy at all above the route segments that are affected by the navigation.
I know you're busy, no rush.
genetic-orange•3y ago
This still has much to do with the caching and swr approach to the router, something RR doesn’t do
We have talked about a mode that would make it behave more like RR and not trigger anything for unchanging route segments.
But that’s still just an idea