🔍 Search Params Are State – Treat Them That Way

In most apps, search params are treated like second-class citizens—manually parsed, loosely typed, and scattered across components. But they’re actually global, serializable, and shareable state. This article by Tanner Linsley makes a compelling case for treating them as such.

🧠 The Problem

• Manual parsing with URLSearchParams is verbose and error-prone

• No type inference, no validation, no coordination between components

• Fragmented schemas lead to bugs, broken deep links, and inconsistent UX

🛠️ The Solution: TanStack Router

TanStack Router introduces schema-based search param validation directly in route definitions:

export const Route = createFileRoute('/dashboard')({

validateSearch: z.object({

sort: z.enum(['asc', 'desc']),

filter: z.string().optional(),

}),

})

✅ Fully typed ✅ Inferred across components ✅ Reactive updates with reducer-style navigation ✅ Hierarchical schema inheritance for nested routes

🔄 Real Benefits

• Components only re-render when relevant search params change

• No duplication or drift—schemas live in the route

• Safer deep linking and better DX for teams

✨ Final Thoughts

Search params aren’t just strings—they’re state. TanStack Router treats them that way, giving you validation, inference, and coordination out of the box.

🔥 Ready to stop leaking state through your URLs? Let’s connect and share insights! 🚀