T
TanStack•2mo ago
rival-black

Updating search params with `navigate({ search: ... })` causes sluggish UX

Search params navigation feels like full page reload Issue Using navigate({ search: ... }) to update search params causes sluggish UX (~300-500ms delay). Using TanStack Start + Convex. Setup 
// __root.tsx - Auth check
beforeLoad: async (ctx) => {
  const { userId, token } = await fetchAuth()
  if (token) ctx.context.convexQueryClient.setAuth(token)
  return { userId, token }
}

// (app)/route.tsx - Permission check  
beforeLoad: async ({ context }) => {
  if (!context.token) throw redirect({ to: '/sign-in' })
  const { success } = await canAccessDashboard() // Convex query
  if (!success) throw redirect({ to: '/unauthorized' })
  return { userId: context.userId }
},
shouldReload: false // ❌ Doesn't help

// (app)/users/index.tsx
const uid = Route.useSearch({ select: (s) => s.uid })
navigate({ 
  search: (prev) => ({ ...prev, uid: user.id }),
  replace: true // ❌ Doesn't help
})
// __root.tsx - Auth check
beforeLoad: async (ctx) => {
  const { userId, token } = await fetchAuth()
  if (token) ctx.context.convexQueryClient.setAuth(token)
  return { userId, token }
}

// (app)/route.tsx - Permission check  
beforeLoad: async ({ context }) => {
  if (!context.token) throw redirect({ to: '/sign-in' })
  const { success } = await canAccessDashboard() // Convex query
  if (!success) throw redirect({ to: '/unauthorized' })
  return { userId: context.userId }
},
shouldReload: false // ❌ Doesn't help

// (app)/users/index.tsx
const uid = Route.useSearch({ select: (s) => s.uid })
navigate({ 
  search: (prev) => ({ ...prev, uid: user.id }),
  replace: true // ❌ Doesn't help
})
Problem Updating ?uid=xxx seems to rerun both beforeLoad functions despite shouldReload: false. Tried - select in useSearch - replace: true
- shouldReload: false All still slow. Should search-only updates skip beforeLoad? Better pattern for modals with search params? in other words when i inspect network tab there seems. request on every change
4 Replies
adverse-sapphire
adverse-sapphire•2mo ago
I've come across the same issue and this is giving me a dilemma. searchparams / hash changes make trigger loaders and rerender. 1) don't use searchparams/hash routes really? should i throw away this useful state manager? 2) don't check auth in loader can't protect page code leakage with ssr
rival-black
rival-blackOP•2mo ago
Soo i have to choose there is no way to make it work
adverse-sapphire
adverse-sapphire•2mo ago
Or maybe can check with beforeload thing only in serverside Manage with context in clientside…
ambitious-aqua
ambitious-aqua•2mo ago
The only way to prevent this is having the token cached. It works great with query client from tanstack query, because it will cache after first navigation, when you're at the client. Not sure how you would do it with convex Can't you check if the token is already in convex client and only fetch for it if not?

Did you find this page helpful?