Navigation resets query state

[comertcimen]

Hi, I use latest nuqs version with react router adapter (nuqs/adapters/react-router/v7). I have some queries for my table (tanstack table). When I navigate, the url changes but the navigation does not finish immediately, therefore for a short time the table rerenders without any query values.

Example:
/contacts and /contacts/:contactId, both are route splitted lazy (using React.lazy in route level and Outlet in layout element)

In contacts view there is a table with search query state (/contacts?search=something)
When a contact is clicked, it navigates to "./contactId". But because the contact view is lazy, it takes some miliseconds to download the javascript file. The url changes immediately, and nuqs state is immediately updated, therefore causes a flickering rerender.

This happens even when the javascript of contact view is loaded. I don't remember this being happened in react router v6.

Any ideas how to solve this?

[franky47]

Are you navigating with a <Link> or a router call?

I'd say the nuqs part behaves as expected: the URL changes, so the state follows. The root of the issue is that the URL changes before the target page is ready/rendered. IIRC, Next.js solved this by rendering the target page in the background (and prefetching). I realise that's not much help in React Router, but there may be some pointers there.

[comertcimen]

I tried both Link and useNavigate, got the same result. I tried without lazy splitting also. Here is how it looks.

ReactRouterPreview.mp4

Nuqs behaves correctly. Any suggestions how to solve the react router issue or should I try to get help from react router community?

[franky47]

I'm not that familiar with the React Router APIs unfortunately, so you might have better luck trying there.

I was just thinking that a repro without nuqs (using only useSearchParams from React Router) but my bet would be that since useSearchParams doesn't re-render on shallow URL updates (also a question for you: is the search field using the shallow: false option?), it wouldn't cause this issue (as it would only update once the navigation has completed).

[comertcimen]

I don't use shallow:false

Here is the current code:

const [globalFilter, setGlobalFilter] = useQueryState("somethingKey")

 const onGlobalFilterChange = (value: string | undefined) => {
    setGlobalFilter(value || null)
}

If I use useSearchParams (like code below) instead of nuqs, there is no problem. But I would like to use nuqs custom parser for tanstack table instead of useSearchParams

const [searchParams, setSearchParams] = useSearchParams()
const globalFilter = searchParams.get("somethingKey")


const onGlobalFilterChange = (value: string | undefined) => {
    if (!value) {
      setSearchParams((params) => {
        params.delete("somethingKey")
        return params
      })
      return
    }

    setSearchParams(params => {
      params.set("somethingKey")
      return params
    })
  }

[franky47]

If I use useSearchParams (like code below) instead of nuqs, there is no problem.

Yeah that's what I thought. React Router core isn't really reactive on (shallow) URL updates, and so neither is useSearchParams, which only updates once the navigation has ended. Nuqs needs to have this shallow update as it's the default behaviour (and we expose useOptimisticSearchParams to get the same reactive values nuqs uses internally). But that's the issue here: nuqs reacts to URL changes too quickly (as it should if the URL is supposed to be the source of truth, React Router is lagging behind here).

One trick I can think of is to cache the current search state (in a useRef), update it along the nuqs update, and have a flag that navigation is occurring to bypass the nuqs value when doing the navigation:

const [globalFilter, setGlobalFilter] = useQueryState('search')
const [isNavigating, setIsNavigating] = useState(false)
const globalFilterCache = useRef(globalFilter)
const navigate = useNavigate()

const onGlobalFilterChange = (value: string | undefined) => {
  globalFilterCache.current = value || null
  setGlobalFilter(globalFilterCache.current)
}

const goTo = (id: string) => {
  setIsNavigating(true)
  navigate(`/contacts/${id}`)
}

// When consuming in the table:
const tableGlobalFilter = isNavigating ? globalFilterCache.current : globalFilter

Another alterative is to carry on the search query with you on the individual item page:

<Link href={`/contacts/${id}?search=${globalFilter}`}>