Performance considerations for useQueryState and re-renders (best practices) #815
Unanswered
jnachtigall
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Basically, I use the new
NuqsHashAdapterfrom #206 (comment) though I am not sure this is the real issue because theNuqsAdapterfrom'nuqs/adapters/next/app'isn't fast either (using current Next 14 app router).I have wrapped my 3 different params (r, t and y) into something that is basically like this in a custom hook that is in
useParams.ts:And instead of prop drilling I use this hook in whatever components needs the hash value to read or set with.
Most components just read:
some read and write:
Is this a good approach? I am wondering if because
selectedRegionsisstring[]if this array is always considered to be different (immutability) for each call to useRegions and will always rerender even if it is maybe always somethig like["one"]returned. So forr=onedoesuseQueryStatereturn always the same reference to the same["one"]or is this always a different array/reference?Also with enabled debug logs, just when loading may app I get this:
logs when just (re)loading the app
This alone looks like, well, a lot...
logs when checking a checkbox
This is for
And this takes like 3s with
npm run devwith Next.js 14I am very sure I can also optimize how I use Mantine Tree (the UI lib I use) by I am wondering if you have any recommendation for using
useQueryStatein a custom hook like the returnedselectedRegionsshould only be used withuseMemo/useCallbackin consuming components?Beta Was this translation helpful? Give feedback.
All reactions