How to prevent unrelated rerenders?

[tordans]

I am adding Zustand and Nuqs to a new app.

When adding Zustand, I notice local rerenders of all components that consume the getter/setter.
When adding Nuqs, I notice global rerenders of all components, no matter if the consume the getter/setter.

I tried abstracting the Nuqs getter/setter into separate as recommended for Zustand in https://tkdodo.eu/blog/working-with-zustand but that does not help. #494 (comment) suggest that this is not needed ("The state updater function is also referentially stable across renders.") anyways.

But how can I get rid of the unrelated rerenders?

Video showing the rerenders (First no state, then Zustand added, then Nuqs added)

Update: The app is now open source at https://github.com/tordans/osmcha2
I switched to using Zustand for all state but the nuqs code is still there and it's just a replacement of ".zustand.ts" to ".nuqs.ts" for the imports.

output.mp4

[franky47]

I'd have to look deeper into your example on a big screen next week, but one thing that comes to mind regarding re-renders is the change of behaviour in useSearchParams since it became reactive of shallow URL updates.

The documentation mentions that the state updater function is referentially stable, which was relevant before, but now unfortunately any change to the URL will cause all useQueryState(s) to re-render.

This is not a great experience, I'd have to see if we can implement a scoped useSearchParam('key') into Next.js core.

Source: https://x.com/fortysevenfx/status/1796262844062986472

[tordans]

@franky47 thanks for confirming the issue. For bigger apps and especially when more state is put in the URL (which is the right way to do it in far more cases that is done today…), this feels like a big issue. So +1 for looking into a solution <3.

Thinking about it, that might also explain why we are having so many rerendering issues with atlas-app in recent weeks … we did update our Next JS version which might have pushed us to a version that always rerenders… (Demo link; but production feels snappy, luckily)

---

Follow up: Does this mean that react compiler (#566) will still help with preventing rerenders due to automatic memoization?

[roopakv]

this might be mis-understanding the issue, but if one were to use the native API, would that solve the issue?

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api

[roopakv]

never mind, i understand the issue better after reading #516. We have a fairly complicated app and re-rendering every component makes the app not feel as snappy (I'm sure we have some things to fix on our end too). Would be nice if there was a way to avoid this.

[franky47]

The best way to work around this is, like every React app, to move your state as down the tree as possible.

You can duplicate calls to the useQueryState(s) hook across components, their state will be kept in sync when updating search params.

[tordans]

A bit off topic but related: https://x.com/tkdodo/status/1818338443753136547 is talking about how React Router apparently has the same issue but Tanstack Query does not:

Another advantage of @tan_stack router is that you can subscribe to a subset of query parameters to avoid re-renders when unrelated params change. It makes the url a true state manager like e.g. zustand

[franky47]

Note: we're experimenting with "key isolation" that allows scoping re-renders only to the search params that did change, for supported frameworks, in #855 (unfortunately that doesn't include Next.js for which core changes would be necessary).