Adopting Tanstack's Approach to Search Params

[Briscoooe]

I've been looking Tanstack's new router docs recently. It's pretty cool, and openly inspired by Remix (and by extension, react-router. One thing that really caught my eye was how they handle Search Params. I think these APIs would be a great addition to Remix and given that Remix currently just exports the useSearchParams hook from react-router, I'm posting here.

One thing I love about Remix is how much it reduces the need to manage a bunch of client-side state and I do this as much as possible using search params (think tabs, filters options/inputs). As Tanstack puts it: "Search Params, the "OG" State Manager".

I think borrowing this approach from Tanstack could be a great fit for Remix, specifically these ideas:

1. JSON-first approach: Tanstack's search params are JSON-first. This is far simpler than concatenating an object or a bunch of variables into a single string, plus it enables much more complex object serialization without extra effort.

2. Validation and type-safety: They've also got a way of validating search params and ensuring type-safety. This seems like a logical extension of the JSON-first approach.

3. Injecting type-safe search params into components.

There are a couple of issues I see with this approach, however:

• This might be easier to pull off with manually defined routes, rather than Remix's file-based routing.
• Shifting away from URLSearchParams might seem to clash with the Remix philosophy of using the platform.

Has anything like this been considered for Remix or react-router?

Cheers

[remorses]

I created a proposal to define query params schema in routes.ts #13800