Update createSelector and `defaultMemoize` to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

markerikson · 2021-10-19T05:25:29Z

This PR:

Updates the createSelector types to accept an optional options object as the last argument
Defines the options object as having a memoizerOptions field that exactly matches the type of all of the provided memoize function's arguments after the initial function-to-be-memoized, with exact type inference of all arguments
Further modifies the memoizerOptions field to optionally be just the first of the memoize function's additional arguments, to support the most common cases of configuring a memoize function (such as passing a custom equality comparison function, or whatever options object the memoization lib supports)
Extracts defaultMemoize to its own file
Updates defaultMemoize to accept either of an equalityCheck function or an options object as its first argument
Rewrites defaultMemoize to add support for a customizably-sized cache with LRU behavior, based on https://github.com/erikras/lru-memoize
Adds an optional resultCheckEquality comparison function to allow reusing the most recent cached value that matches a recalculated value (the "todos.map(todo => todo.id) is still shallow equal after toggling a todo" use case)

This makes the following usages possible:

    const defaultMemoizeAcceptsArgsAsArray = createSelector(
      (state: StateAB) => state.a,
      (state: StateAB) => state.b,
      (a, b) => a + b,
      {
        memoizerOptions: [
          // equalityCheck, first arg
          (a, b) => a === b
        ]
      }
    )


    const defaultMemoizeAcceptsFirstArgDirectly = createSelector(
      (state: StateAB) => state.a,
      (state: StateAB) => state.b,
      (a, b) => a + b,
      {
        // equalityCheck, first arg, no wrapping array!
        memoizerOptions: (a, b) => a === b
      }
    )

    const defaultMemoizeAcceptsFirstArgDirectly = createSelector(
      (state: StateAB) => state.a,
      (state: StateAB) => state.b,
      (a, b) => a + b,
      {
        memoizerOptions: {
          equalityCheck: (a, b) => a === b,
          maxSize: 3,
          resultEqualityCheck: shallowEqual
        }
      }
    )

These changes should solve a majority of the complaints users have had with Reselect:

You no longer need to call createSelectorCreator just to customize the equality comparison
It now supports cache sizes > 1, configurable per-instance
A a previous result value that is considered equal to a freshly-generated result can be reused.

And all of this should be entirely backwards-compatible with existing code :)

Example of the latter case from the defaultMemoize tests:

    for (let maxSize of [1, 3]) {
      let funcCalls = 0

      const memoizer = defaultMemoize(
        (state: Todo[]) => {
          funcCalls++
          return state.map(todo => todo.id)
        },
        {
          maxSize,
          resultEqualityCheck: shallowEqual
        }
      )

      // Initial calculation
      const ids1 = memoizer(todos1)
      expect(funcCalls).toBe(1)

      // Same input, cache hit, reuse last result
      const ids2 = memoizer(todos1)
      expect(funcCalls).toBe(1)
      expect(ids2).toBe(ids1)

      // Different input, but value is shallow equal to the last result
      const ids3 = memoizer(todos2)
      expect(funcCalls).toBe(2)
      expect(ids3).toBe(ids1)
    }

codecov · 2021-10-19T05:26:25Z

Codecov Report

Merging #513 (ee1500d) into master (6bc2b7a) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master      #513   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         2    +1     
  Lines           53        94   +41     
  Branches         7        21   +14     
=========================================
+ Hits            53        94   +41

Impacted Files	Coverage Δ
src/defaultMemoize.ts	`100.00% <100.00%> (ø)`
src/index.ts	`100.00% <100.00%> (ø)`

src/defaultMemoize.ts

markerikson · 2021-10-19T05:44:24Z

src/index.ts

-      (...args: SelectorResultArray<Selectors>) => Result
-    ]
+    ...items:
+      | [...Selectors, (...args: SelectorResultArray<Selectors>) => Result]


💬 this is so stupid and ugly, but it works (when an optional object at the end of the tuple didn't)

Whoaaa. Don't recall ever seeing : | [ in that order before.

Hah, yeah. My first attempt was just throwing an optional object into the tuple, but that totally broke everything.

I just sort of randomly thought "what if I make it a union of two exact tuples instead", and to my shock and amazement that actually worked. Immediately.

I really don't need to bother leaving this comment, but for anyone curious, :\n| ...\n| ... is how Typescript does multi-line type-or expressions, just prefix each line with a |. It's like trailing commas in a list.

markerikson · 2021-10-19T06:43:38Z

Also just remembered that extracting another file will break the Babel changes I made in the last couple days. Have to compile that file too.

erikras

It kills me to see all those anys in there. But if you're using a single cache structure for multiple Entrys, I guess you just can't know.

Glad to see some of this old code (that still has 44k downloads/month) getting a new lease on life. 👏

erikras · 2021-10-19T07:59:03Z

src/defaultMemoize.ts

+      return false
+    }
+
+    // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible.


src/defaultMemoize.ts

erikras · 2021-10-19T08:01:25Z

src/index.ts

-      (...args: SelectorResultArray<Selectors>) => Result
-    ]
+    ...items:
+      | [...Selectors, (...args: SelectorResultArray<Selectors>) => Result]


Whoaaa. Don't recall ever seeing : | [ in that order before.

markerikson · 2021-10-19T14:57:39Z

Yeah, upon further thought I think I can switch most or all of the any in the cache logic to unknown.

The amusing thing is I just copy-pasted the code, and all I had to do was whip up a pair of interfaces for Entry and Cache... and it just worked despite you having written the original code in Flow! :)

(helps that the types were really simple in the first place of course, but still neat)

createSelector now accepts an options object as its last argument. For now, the only field in that object is `memoizeOptions`. This field represents whatever the additional parameters are for the supplied memoization function. If this options object is supplied, `createSelector`will try to use the `memoizeOptions` field as the params to `memoize()`. If the object exists but no `memoizeOptions` field, it will fall back to whatever memoizer options were passed as args to the original `createSelectorCreator` call. Further complicating things: normally, `memoizeOptions` is an array containing all the individual args. For example, `defaultMemoize` currently takes one options arg: the `equalityCheck` function used for comparisons. So, to pass that directly here, you'd do: createSelector( [input1, input2], output, { memoizeOptions: [ equalityCheck ] } ) But, it's very common to want to _only_ use the _first_ options arg, and many libs have _only_ one arg anyway (like defaultMemoize does right now). So, to simplify usage, we also allow passing that first arg directly in `memoizeOptions` without an array around it: createSelector( [input1, input2], output, { memoizeOptions: equalityCheck } ) Internally, this is done by checking to see if `memoizeOptions` is an array or not. If it's an array, we use it as-is. If not, we assume it must be "the first options arg" and wrap it in an array so it can be spread via `apply()`. This does mean that a lib that takes an array as its first options arg will break things here, but I can't immediately see any libs that do that - most either take `equalityCheck` or an object. Besides, the goal of this effort is that `defaultMemoize` will handle enough use cases that's all you'd typically use anyway.

Implementation based on Erik Rasmussen's `lru-memoize`: https://github.com/erikras/lru-memoize

markerikson · 2021-10-20T00:40:31Z

Replaced a bunch of any with unknown, and fixed up the build config.

Also renamed memoizerOptions to memoizeOptions (no 'r') for consistency.

alexreardon · 2021-10-20T05:01:48Z

package.json

@@ -110,5 +110,8 @@
    "ts-jest": "26.5.6",
    "typescript": "^4.4.0"
  },
-  "dependencies": {}
+  "dependencies": {
+    "memoize-one": "^6.0.0-beta.1",


6.0.0 has just been released 🎉

markerikson added 4 commits October 19, 2021 01:11

Add initial options object type to createSelector args

714c0c4

Infer all memoizer arguments directly, without overloads

21865e4

Add memoize-one and micro-memoize test deps

e2eb3f6

Add additional custom memoizer checks

b715d9d

markerikson force-pushed the feature/createselector-options branch from 4c07b61 to 89ff857 Compare October 19, 2021 05:30

markerikson commented Oct 19, 2021

View reviewed changes

src/defaultMemoize.ts Outdated Show resolved Hide resolved

markerikson commented Oct 19, 2021

View reviewed changes

erikras approved these changes Oct 19, 2021

View reviewed changes

markerikson added 8 commits October 19, 2021 20:31

Group selector tests with meaningful descriptions

d5711c9

Update defaultMemoize to accept an options object as its arg

8dead22

Extract defaultMemoize to a separate file

98013a1

Rewrite defaultMemoize to use an LRU cache with configurable size

7284ba3

Implementation based on Erik Rasmussen's `lru-memoize`: https://github.com/erikras/lru-memoize

Add support for reusing a recent value if resultEqualityCheck given

c1d3f98

Update build inputs and remove standalone typedefs

3275e1e

Rename field to memoizeOptions

ee1500d

markerikson force-pushed the feature/createselector-options branch from 89ff857 to ee1500d Compare October 20, 2021 00:33

markerikson merged commit 581c084 into master Oct 20, 2021

markerikson deleted the feature/createselector-options branch October 20, 2021 00:41

This was referenced Oct 20, 2021

Return previous state if the props change but not the output #441

Closed

Regression when using lodash for an unbounded cache and reselect 4.0 #376

Open

alexreardon reviewed Oct 20, 2021

View reviewed changes

apiiro-snyk mentioned this pull request Jul 2, 2024

[Snyk] Upgrade reselect from 4.0.0 to 4.1.8 apiiro-snyk/react-boilerplate#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update createSelector and `defaultMemoize` to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

Update createSelector and `defaultMemoize` to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

markerikson commented Oct 19, 2021 •

edited

Loading

codecov bot commented Oct 19, 2021 •

edited

Loading

markerikson Oct 19, 2021

erikras Oct 19, 2021

markerikson Oct 19, 2021

phoenixeliot Dec 20, 2022 •

edited

Loading

markerikson commented Oct 19, 2021

erikras left a comment

erikras Oct 19, 2021

erikras Oct 19, 2021

markerikson commented Oct 19, 2021

markerikson commented Oct 20, 2021 •

edited

Loading

alexreardon Oct 20, 2021

Update createSelector and defaultMemoize to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

Update createSelector and defaultMemoize to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

Conversation

markerikson commented Oct 19, 2021 • edited Loading

codecov bot commented Oct 19, 2021 • edited Loading

Codecov Report

markerikson Oct 19, 2021

Choose a reason for hiding this comment

erikras Oct 19, 2021

Choose a reason for hiding this comment

markerikson Oct 19, 2021

Choose a reason for hiding this comment

phoenixeliot Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

markerikson commented Oct 19, 2021

erikras left a comment

Choose a reason for hiding this comment

erikras Oct 19, 2021

Choose a reason for hiding this comment

erikras Oct 19, 2021

Choose a reason for hiding this comment

markerikson commented Oct 19, 2021

markerikson commented Oct 20, 2021 • edited Loading

alexreardon Oct 20, 2021

Choose a reason for hiding this comment

Update createSelector and `defaultMemoize` to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

Update createSelector and `defaultMemoize` to accept options (maxSize, equalityCheck, resultEqualityCheck) #513

markerikson commented Oct 19, 2021 •

edited

Loading

codecov bot commented Oct 19, 2021 •

edited

Loading

phoenixeliot Dec 20, 2022 •

edited

Loading

markerikson commented Oct 20, 2021 •

edited

Loading