Why does nuqs state get computed multiple times in a single render after navigating to different query with Next.js Link?

[k35o]

I'm experiencing an issue where nuqs-generated state is being computed multiple times within a single render cycle after navigating to a different query using Next.js Link component.

Steps to reproduce

1. Use Next.js Link to navigate to a page with different query parameters
2. The nuqs hook appears to run multiple times during the same render
3. This only happens after navigation, not on initial page load

Example

Consider the component that performs the calculation below.

const searchParams = useSearchParams();
const [query, setQuery] = useQueryState("query", parseAsString);
console.log("rendered");
console.log("next", searchParams.toString());
console.log("nuqs", query);

When a query moves from abc to xyz by Next.js Link component ...

Expected behavior

rendered
next query=abc
nuqs abc

Actual behavior

rendered
next query=abc
nuqs null
nuqs null
nuqs null
nuqs null

Questions

• Is this expected behavior when using Next.js Link with nuqs?
• Are there any best practices to avoid this situation?
• Could this be related to React's strict mode or Next.js's navigation handling?

playground(codesandbox): https://codesandbox.io/p/devbox/pycycm

[franky47]

Looking at what happens if I remove nuqs from the equation, the page renders 3 times when using only useSearchParams after clicking a Link, so that's our baseline.

Adding nuqs does add one render, and it looks like it catches up with useSearchParams on that last one: when navigating from / to ?query=abc, the first 3 renders (triggered by Next.js) give a null state for nuqs (which is incorrect since useSearchParams returns the correct value).

I'll look into that, thanks for the report.

[k35o]

@franky47
Thank you for looking into this!

Why aren't the "rendered" or "next" console logs appearing? I would expect to see those debug messages in the console if the component is re-rendering multiple times.

[franky47]

This is what I see when running locally:

[k35o]

It didn't work in CodeSandbox's console, but it worked as expected in Chrome's console. Thank you!