T
TanStack4mo ago
generous-apricot

Why is the current loader invoked when hovering over a child link?

Not sure how active the Github Discussions actually are, so posting here as well. I've noticed a behavior in the basic example that I cannot explain. Link to relevant route in the basic example: https://tanstack.com/start/latest/docs/framework/react/examples/start-basic?path=examples%2Freact%2Fstart-basic%2Fsrc%2Froutes%2Fposts.route.tsx On route /posts, I observe that when hovering over the Link component pointing at route /posts/$postId it will trigger the loader function of /posts/$postId and /posts. It also seems that while the loader for /posts/$postId seems to adhere to the 30 sec cache time, the loader for /posts is being invoked over and over again. Why does it trigger the loader of its own route at all? Even adding something like staleTime: 10_000 doesn't seem to stop it in all cases (I've seen cases where it loads again after 2 seconds). Can someone explain this behavior and how can I change that? Constantly fetching all posts is a behavior that I don't need.
React TanStack Start Start Basic Example | TanStack Start Docs
An example showing how to implement Start Basic in React using TanStack Start.
5 Replies
judicial-coral
judicial-coral4mo ago
This seems to be the current behavior of the router when interacting (preload, navigate) with a child route. This issue is related (there might be others): https://github.com/TanStack/router/issues/3997
GitHub
Performance is horrible when using recommended Authentication patte...
Which project does this relate to? Router Describe the bug When using the recommended patterns for authentication, particularily in tanstack start, the performance of the app is garbage. because on...
judicial-coral
judicial-coral4mo ago
You can work around it by using react-query to do the fetching and leveraging its caching mechanism
xenial-black
xenial-black4mo ago
Preloading | TanStack Router React Docs
Preloading in TanStack Router is a way to load a route before the user actually navigates to it. This is useful for routes that are likely to be visited by the user next. For example, if you have a li...
generous-apricot
generous-apricotOP4mo ago
Thanks for the link. However, it doesn't mention why the current loader would trigger constantly. The official basic example (linked above) triggers the current loader (not the child route) for every element in the list. It's literally dozens of requests fired at the same time. The only way I found to stop that is to force staleTime: Infinity on the loader. Yeah, I expected as much. Was hoping that Tanstack Start's loader function could do most of the lifting here. But the behavior I've observed made this a showstopper.
conscious-sapphire
conscious-sapphire4mo ago
I also found the same problem and was also confused

Did you find this page helpful?