TanStackT
TanStack•3mo ago•
7 replies
dual-salmon

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
})

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
Was this page helpful?