How to synchronize Next.js's useSearchParams and next-usequerystate?

[lamualfa]

Currently, when I change the search params using next-usequerystate, the useSearchParams won't be updated. Is it possible to synchronize both?

My use case is, I have two states stored in the URL search params:

• The first state is search, modified by next-usequerystate and triggered using input.

• The second state is keyword modified by href & useSearchParams and triggered using a when the user clicks the link.

The problem is the component with the second state (keyword) needs to synchronize all search params, then update the href param, and then convert it to string so we can get a new modified href.

UPDATE

New useSearchParams that reactive to next-usequerystate:

import { subscribeToQueryUpdates } from 'next-usequerystate'
import { useSearchParams } from 'next/navigation'
import { useLayoutEffect, useState } from 'react'

export function useReactiveSearchParams() {
  const defaultSearchParams = useSearchParams()
  const [searchParams, setSearchParams] =
    useState<URLSearchParams>(defaultSearchParams)

  useLayoutEffect(() => {
    subscribeToQueryUpdates(({ search }) => {
      setSearchParams(search)
    })
  }, [])

  return searchParams
}

[franky47]

As discussed in #400 (comment), useSearchParams is not (yet) reactive of shallow URL changes, which is the default update mechanism.

[lamualfa]

Ok, thanks.