One key triggers rerender of components using another key

[nihiluis]

Hi!

Say I'm having const [recipeId, setRecipeId] = useQueryState("id") in RecipeComponent.tsx
and const [age, setAge] = useQueryState("age") in AgeComponent.tsx

If I use setAge in my AgeComponent, then it seems that my RecipeComponent gets rerendered.

Is it correct like that?

Thank you.

[franky47]

Unfortunately this is a Next.js issue: useQueryStates calls useSearchParams internally, and it will re-render when any search param changes.

[franky47]

Honestly I think the biggest issue with not using useSearchParams is server-side rendering. I don't know how else you might get the search params from the request in a manner that's correct and doesn't trigger hydration issues.

[AshotN]

Do you mean during the initial render of the page? During SSR?

Correct me if I'm wrong, but server components don't rerun SSR during query param change.

[franky47]

If you use the searchParams page prop or anything that marks the page as dynamic (this is changing a bit in Next 15), and shallow: false in your hook to use the router rather than the History API, they do (and so do the client components that use useSearchParams).

[AshotN]

Hey, was wondering. Has Next 15 changed anything to resolve this problem?

[franky47]

No, it still uses a single Context to propagate the search params in useSearchParams (source). Our best hope would be for React to land useContextSelector, but there hasn't been movement on this front for a while.