Not equal empty array reference with customParam

Problem:

Reproduce:

1. have two query params, one is custom ArrayParam, another one is StringParam. The custom param provider looks like this:

const commaArrayParams = {
  encode: (arr) => {
    if (arr.length === 0) {
      return undefined;
    }
    return arr.join(",");
  },
  decode: (str) => {
    if (!str || Array.isArray(str)) {
      return [];
    }

    return str.split(",");
  }
};

1. useQueryParams like this:

const config = {
  filters: withDefault(commaArrayParams, ["hi"]),
  sortBy: withDefault(StringParam, "a")
};

function App() {
  const [query, setQuery] = useQueryParams(config);
  ...
}

1. Toggle the sortBy query params by calling setQuery({ sortBy: query.sortBy === "a" ? "b" : "a"}).

Expect

query.filters should not change.

Actual

query.filters changed every time.

Sandbox to reproduce: https://codesandbox.io/s/admiring-dirac-fhv7o

Some findings & Questions:

1. is it an expected behaviour?
2. when there is a non-value for filters in the url. query.filters not changes. (expected).
3. when change cached the returned empty array. so the return reference is the same. query.filters not changes.

const emptyArr = [];
const commaArrayParams = {
  encode: (arr) => {
    if (arr.length === 0) {
      return undefined;
    }
    return arr.join(",");
  },
  decode: (str) => {
    if (!str || Array.isArray(str)) {
      return emptyArr;
    }

    return str.split(",");
  }
};

Why this happened? When is the decoded function invoked? Thanks for help.

[pbeshai]

This is due to your decode function I believe. withDefault only kicks in if a nully response is returned from decode. Does it work as you expect if you switch your commaArrayParams to be the following?

const commaArrayParams = {
  encode: (arr) => {
    if (arr.length === 0) {
      return undefined;
    }
    return arr.join(",");
  },
  decode: (str) => {
    if (!str || Array.isArray(str)) {
      return undefined; // <-- changed this
    }

    return str.split(",");
  }
};

In any case, I’d suggest using this approach for a comma delimited array encoding:

import {
  encodeDelimitedArray,
  decodeDelimitedArray
} from "use-query-params";

/** Uses a comma to delimit entries. e.g. ['a', 'b'] => qp?=a,b */
const CommaArrayParam = {
  encode: (array) => encodeDelimitedArray(array, ','),
  decode: (arrayStr) => decodeDelimitedArray(arrayStr, ',')
};


const config = {
  filters: withDefault(CommaArrayParam, ["hello"]),
  sortBy: withDefault(StringParam, "asc")
};

[pbeshai]

Published in v1.1.9