React Router v7 `useSearchParams` with stable `setSearchParams` function.

useSearchParams.ts

import { useRef, useMemo, useCallback } from 'react'
import { createSearchParams, useLocation, useNavigate } from 'react-router'
import type { SetURLSearchParams, URLSearchParamsInit } from 'react-router'

export default function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams] {
  const defaultSearchParamsRef = useRef(createSearchParams(defaultInit))
  const hasSetSearchParamsRef = useRef(false)
  const searchParamsRef = useRef<URLSearchParams>()
  const location = useLocation()

  searchParamsRef.current = useMemo(
    () =>
      // Only merge in the defaults if we haven't yet called setSearchParams.
      // Once we call that we want those to take precedence, otherwise you can't
      // remove a param with setSearchParams({}) if it has an initial value.
      getSearchParamsForLocation(
        location.search,
        hasSetSearchParamsRef.current ? null : defaultSearchParamsRef.current
      ),
    [location.search]
  )

  const navigate = useNavigate()
  const setSearchParams = useCallback<SetURLSearchParams>(
    (nextInit, navigateOptions) => {
      const newSearchParams = createSearchParams(
        typeof nextInit === 'function' ? nextInit(searchParamsRef.current!) : nextInit
      )
      hasSetSearchParamsRef.current = true
      void navigate(`?${newSearchParams}`, navigateOptions)
    },
    [navigate]
  )

  return [searchParamsRef.current, setSearchParams]
}

function getSearchParamsForLocation(
  locationSearch: string,
  defaultSearchParams: URLSearchParams | null
) {
  const searchParams = createSearchParams(locationSearch)

  if (defaultSearchParams) {
    defaultSearchParams.forEach((_, key) => {
      if (!searchParams.has(key)) {
        defaultSearchParams.getAll(key).forEach((value) => {
          searchParams.append(key, value)
        })
      }
    })
  }

  return searchParams
}