What's the correct way to return an empty array as fallback from a selector?

[cgerteis-inx]

I have a selector which returns an empty array as fallback if the main selector function returns a nullish result. I started off with a seemingly simple selector like this:

const getResult = (state) => state.result ?? [];

The linter correctly complains that this selector lacks memoization, because [] is unstable:

Selector getResult returned a different result when called with the same parameters. This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized: ...

I then tried using reselect to memoize the selector like this:

const getResult = createSelector((state) => state.result, result => result ?? []);

The linter also complains about this, since when the fallback isn't triggered, the combiner simply returns the input:

The result function returned its own inputs without modification.

I know I can turn off the identityFunctionCheck, but ideally I want to have it on in case the selector is refactored later on. Is there a better way to handle this case?

One solution I came up with is to "cash" the empty array manually, e.g.:

const emptyArray = [];
const getResult = (state) => state.result ?? emptyArray;

Technically, that works but it kinda feels wrong. Suggestions would be appreciated. 🙂

[aryaemami59]

Actually what you have is sufficient:

const emptyArray = [];
const getResult = (state) => state.result ?? emptyArray;

[EskiMojo14]

Yep - I don't know if we have any reselect docs that call it out but we definitely recommend it over at the RTK Query docs

[aryaemami59]

We do: https://reselect-docs.netlify.app/usage/handling-empty-array-results

[cgerteis-inx]

Sorry about that, I missed that in the docs. Thanks for the super quick response.