I'm trying to sync URL params with query state. I did it using two methods. Both work, but the second approach (using next-usequerystaet) causes all RSCs to reload, even those in root layout or sub layouts.

Method 1: Custom Hook --- Works as expected

export const useQueryStates = (defaultParams) => {

  const [queryParams, setQueryParams] = React.useState(defaultParams)

  const pathname = usePathname()
  const router = useRouter()

  React.useEffect(() => {
    const url = new URL(window.location.href);
    const searchParams = new URLSearchParams(queryParams);
    url.search = searchParams.toString();
    console.log(url.toString())
    router.push(url.toString(), undefined, { shallow: true })
  }, [queryParams])

  return [
    queryParams,
    setQueryParams,
  ]

}

export default useQueryStates

Method 2: next-usequerystate --- Even through shallow is set to true (as per docs) , it still causes the entire page to refresh when the state is mutated. I prefer to use next-usequerystate because of the controls over parsing of params.

const [queryParams, setQueryParams] = useQueryStates({
  limit: parseAsInteger.withDefault(queryStringParams.limit),
  offset: parseAsInteger.withDefault(queryStringParams.offset),
  sort: parseAsString.withDefault(queryStringParams.sort),
  order: parseAsString.withDefault(queryStringParams.order),
},
  { shallow: true }
)

Anyone come across the same issue ?