Can't clear ArrayParam state when default value is not empty

[oleksiy-letushev-axon]

When I have an ArrayParam state with a non-empty default array, I can't make it empty

const Arr = withDefault(ArrayParam, ["bar"]);

const Demo = () => {
  const [state, setState] = useQueryParam("foo", Arr);

  return (
    <div>
      <p>State: {JSON.stringify(state)}</p>
      <button
        onClick={() => {
          setState([]); // doesn't work
        }}
      >
        Clear state
      </button>
    </div>
  );
};

https://codesandbox.io/s/gallant-shockley-w2yojs?file=/src/App.js

[pbeshai]

Empty arrays are tricky since there isn't really any invertible options from URLSearchParams or even query-string. How would you encode them in the array and get them decoded? Consider this code

      <p>URLSearchParams encode foo []: {JSON.stringify(new URLSearchParams({ foo: []}).toString())}</p>
      <p>URLSearchParams decode foo=: {JSON.stringify(new URLSearchParams("?foo=").get('foo'))}</p>
      <p>URLSearchParams decode foo=: {JSON.stringify(new URLSearchParams("?foo=").getAll('foo'))}</p>
      <p>query-string stringify encode foo []: {JSON.stringify(stringify({ foo: [] }))}</p>
      <p>query-string stringify decode "": {JSON.stringify(parse("")).foo}</p>

I'm not really sure there's anything obvious we can do in the library to circumvent this. That being said, if you setState(['']) it will be decoded as [] in your sandbox and encoded in the URL as ?foo=

[oleksiy-letushev-axon]

Looks tricky but it works at least. Many thanks 🙏