T
TanStack•2y ago
ratty-blush

State reloaded using useSearch on hover link

When hovering a link that has search params set, useSearch updates it's state on hover even if the link has not been clicked yet. The router has the following options set: 
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
Am I supposed to not set the defaultPreloadStaleTime? I'm using tanstack query and it was said to add this line. Please find a reproduction here https://stackblitz.com/edit/github-cpewbw-9mnis3 Edit: I see this discussion which is what I'm encountering https://github.com/TanStack/router/discussions/1078
4 Replies
sunny-green
sunny-green•2y ago
https://github.com/TanStack/router/discussions/1078#discussioncomment-8262102 Could you try adding this in your route? 
export const Route = createFileRoute({
  // ...,
  loaderDeps: ({ search }) => ({ search }), // <- this right here
});
export const Route = createFileRoute({
  // ...,
  loaderDeps: ({ search }) => ({ search }), // <- this right here
});
GitHub
Route search params reloads state on link hover · TanStack router ·...
Hi, I've looked around and this seems to be possibly a bug (unless I have misconfigured how I'm using search params within TanStack router), but when I hover a link, even when I didn't ...
ratty-blush
ratty-blushOP•2y ago
Thanks that seems to have worked!
rising-crimson
rising-crimson•2y ago
what these two lines doing? defaultPreload and defaultPreloadStaleTime? I think I didn't find them in docs.
sunny-green
sunny-green•2y ago
It falls into the preloading category and for when a loader should be fired. https://tanstack.com/router/latest/docs/framework/react/guide/preloading defaultPreload - set the preload behaviour (ie: intent - hover/focus on a link) defaultPreloadStaleTime - set the duration after which a preload should be considered stale/out of date. 0 Means its always considered out of date, so whenever a user shown intent of going to a page, it'll run the loader.
Preloading | TanStack Router 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 list of posts and the user is likely to click on one of them, you can preload the post route so that it's ready to go when the user clicks on it. S...

Did you find this page helpful?