Updating state with shallow false makes multiple reenders

[juliomuhlbauer]

When changing the search param with shallow: false, makes multiple reenders on client and blocks the RSC to refetch when the client component is heavy.

[franky47]

Do you have a reproduction example?

Having multiple renders is expected as there is at least one when the state updates, and one per Suspense boundary when its RSC payload resolves from either the server or the local client cache.

[juliomuhlbauer]

I think that is a Nextjs problem.
I am testing this to give a real reproduction. But I have a reproduction showing some reendes in useSearchParams()

https://search-param-wine.vercel.app/

https://github.com/juliomuhlbauer/search-param/

Try to click in the links to change the search params. For now the Select does nothing.

I will expand the reproduction to show when the UI is heavy.

[juliomuhlbauer]

Now I made an example with the next-usequerystate and it causes multiple reenders.

This example doesn't block the UI. But when it is with heavy UI it blocks.

https://search-param-nqx9ne9vw-juliomuhlbauer.vercel.app/use-query

Check de console

https://github.com/juliomuhlbauer/search-param/

[juliomuhlbauer]

Made an directory with a heavy UI. Well is not that heavy, but it blocks the render.

https://search-param-wine.vercel.app/use-query-with-select

[juliomuhlbauer]

A workaround kind of works: https://search-param-wine.vercel.app/use-query-with-select-in-layout-custom

But is does give an error of React and it does not get the value SSR.

[franky47]

Thanks, I was able to reproduce on my end, will take a look.

I found on the playground that there are two renders on the first query update after a hard reload of the page, but only one for subsequent updates, not sure why.

Also, in development, React will use strict mode which performs two render passes per actual render to fish out incorrect useEffect usage, so checking for renders should be done in a production build.

[juliomuhlbauer]

Try removing the useSearchParam hook. I think Nextjs makes a reender whithin the Suspense boundary and causes the UI to reender multiple times.

I created a alternative hook for useSearchParam, but it only works client side. So need to import dynamically without ssr.

[juliomuhlbauer]

Maybe this involves the behavior of useSearchParams: https://nextjs.org/docs/app/api-reference/functions/use-search-params#behavior

I dont't know why its different from the useParams hook.

[franky47]

I was able to get a render loop without using next-usequerystate on the /use-query-with-select page, by setting the querystring directly with the Next.js router:

  const router = useRouter()
  const cidade = 'readonly'
  const setCidade = React.useCallback(
    (city: string) => {
      router.replace('?cidade=' + city, { scroll: false })
    },
    [router]
  )
  // const [cidade, setCidade] = useQueryState(
  //   TEST_PARAM,
  //   parseAsString
  //     .withOptions({
  //       shallow: false,
  //     })
  //     .withDefault('Taubaté')
  // )

I doubt there much I can do if your UI behaves like this with the stock Next.js router unfortunately..

[juliomuhlbauer]

Thanks! I opened an issue to the Ark UI library: chakra-ui/ark#1738

But I think it is a Nextjs bug.

[juliomuhlbauer]

I opened an issue on Nextjs: vercel/next.js#58684

[franky47]

Closing as unrelated to nuqs (behaviour is reproducible without it).