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.

[AshotN]

Understood, I think I'll spend some time diving into how nuqs works and see if I can understand how it all works. Thank you

[AshotN]

Just playing around, I see how annoying it is dealing with query params with JavaScript.

I made a fork as an attempt, and deployed it

I thought I was making progress with limiting renders until I realized a regression when you have a link that goes to the page you are already on.

The query params get removed from the URL and that is hard to detect without the re-rendering :(

[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).