Support partial update in useSearchParams

[librz]

Right now, useSearchParams() returns [searchParams, setSearchParams]

The limit of the set function is that it cannot easily update/add/delete specific search key(s) in a consistent manner.

For instance, in order to update name, delete age & add lang in ?name=joe&age=7&sex=male&address=xxx, you'd have to:

const [searchParams, setSearchParams] = useSearchParams();

setSearchParams(prev => {
  const newParams = new URLSearchParams(prev);
  newParams.set('name', 'john');
  newParams.set('lang', 'en-US');
  newParams.delete('age');
  return newParams;
})

Propose to add a updateSearchParams function to the returned array, so individual param(s) can be easily updated/deleted/added while keeping the rest:

const [searchParams, setSearchParams, updateSearchParams] = useSearchParams();

updateSearchParams({
  name: 'john',
  age: null,
  lang: 'en-US'
}); 

The implementation is simple, something like:

const updateSearchParams = useCallback(
  (params: Record<string, string | null | undefined>, navigateOptions?: NavigateOptions) => {
    setSearchParams((prev) => {
      const newSearchParams = new URLSearchParams(prev);
      Object.entries(params).forEach(([key, value]) => {
        if (!value) {
          newSearchParams.delete(key);
        } else {
          newSearchParams.set(key, value);
        }
      });
      return newSearchParams;
    }, navigateOptions);
  },
  [setSearchParams]
);

[franky47]

nuqs does this (and adds type-safety, so your age search param can be parsed as a number): https://nuqs.47ng.com/