Best practice? Filtering logic with useSuspenseQuery + react-router v7 useSearchParams

[vaziliybober]

Hey! I'm using react-router v7 and useSuspenseQuery for making some filtering logic.

I have a filters form and a submit button. Immediately after the form is submitted, these things must happen:

1. Search params in the URL need to update accordingly (filters go there)
2. A spinner needs to appear to indicate that we are currently fetching new data based on the filters
3. Filters that are submitted need to me shown
4. The previous filtering results need to stay (until new data arrives)

I use the search params as the source of truth for the filters. But navigation is a transition now in react-router v7. So the value of searchParams from react-router is actually deferred. This is good for keeping the previous data on the screen. But this is bad for showing the filters that are just submitted. How do I show them?

I guess I have to make a separate (undeferred) state for them now. And I have to synchronise it with the searchParams state. This feels wrong, but I don't know what else to do. I like Suspense and useSuspenseQuery, but this bothers me. I didn't have to do this with useQuery + placeholderData: keepPreviousData

Can you suggest a cleaner solution?

I created a CodeSandbox (https://codesandbox.io/p/sandbox/fast-pine-h2f6wc) with two forms that provide the same UX, but one is with useSuspenseQuery, and the other is with useQuery. The useQuery is much cleaner because of this problem, but I want to use Suspense because of all the other benefits it brings.

[TkDodo]

But navigation is a transition now in react-router v7. So the value of searchParams from react-router is actually deferred. This is good for keeping the previous data on the screen. But this is bad for showing the filters that are just submitted. How do I show them?

Not sure what this has do to with react-query? How would that work if you suspend e.g. with use in React 19? I think this is a question that you have to ask the react-router maintainers.

I think it’s just one trade-off in one way or the other. With TanStack router, you would need to call useDeferredValue(searchParams) manually to opt-into transitions, then pass that value to useQuery. So transitions are more opt-in.

[vaziliybober]

Thank you! I just thought maybe I'm missing some obvious pattern here. I'm not 100% sure in my understanding of all these new things. I have already asked this question to react-router maintainers also and suggested the useDeferredValue opt-in too! So now I know that i was thinking correctly.