[Docs]: for useSearchParams, functional updates should be explained in more detail about react-router HOT 3 OPEN

Yeah, both are relevant: the Object.fromEntries trick would be helpful there, and then an explanation of how to properly delete a param would be also useful. Is

setSearchParams(params => {
  const queryParams = Object.fromEntries(params)
  delete queryParams['page']
  return queryParams
})

sufficient to avoid side-effects?

from react-router.

IMHO the bigger undocumented caveat is that any mutation of searchParams (the first array entry returned), e.g. searchParams.delete('page') has the side effect of actually changing the URL.

from react-router.

URLSearchParams is not a regular object, so you can't spread it like you normally would.

Instead, you need to convert the existing params into an object via Object.fromEntries()

const [searchParams, setSearchParams] = useSearchParams()

//...
const setPageNumber = (pageNumber: number) => 
  setSearchParams(params => ({ ...Object.fromEntries(params), page: String(pageNumber) }))

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams

from react-router.