feat(core): memoize selector results

Author: MrWolfZ

README.md

@@ -155,8 +155,6 @@ This library was heavily inspired by [Rematch](https://rematch.gitbooks.io/remat
 
 ## Open points
 
-- core: add memoization to selectors (also mention this briefly in the "derived state" recipe)
-- core: add note to "composing my selectors" recipe about interplay with memoization (e.g. due to in-place sorting)
 - core: make state input to selectors deep readonly (i.e. freeze during dev and add `Immutable` type)
 - core: add multi-modules that maintain a variable set of states
 - react: create overload for `useSimplux` that takes a module and an inline selector

packages/core/src/selectors.spec.ts

@@ -114,6 +114,70 @@ describe('selectors', () => {
 
         expect(plus.owningModule).toBe(moduleMock)
       })
+
+      it('is memoized without arguments', () => {
+        const mock = jest.fn()
+
+        const { value } = createSelectors(moduleMock, {
+          value: c => mock(c)!,
+        })
+
+        value()
+
+        expect(mock).toHaveBeenCalledTimes(1)
+
+        value()
+
+        expect(mock).toHaveBeenCalledTimes(1)
+
+        moduleState = moduleState + 1
+
+        value()
+
+        expect(mock).toHaveBeenCalledTimes(2)
+
+        value()
+
+        expect(mock).toHaveBeenCalledTimes(2)
+      })
+
+      it('is memoized with arguments', () => {
+        const mock = jest.fn()
+
+        const { plus } = createSelectors(moduleMock, {
+          plus: (c, amount: number) => mock(c, amount)!,
+        })
+
+        plus(5)
+
+        expect(mock).toHaveBeenCalledTimes(1)
+
+        plus(5)
+
+        expect(mock).toHaveBeenCalledTimes(1)
+
+        moduleState = moduleState + 1
+
+        plus(5)
+
+        expect(mock).toHaveBeenCalledTimes(2)
+
+        plus(5)
+
+        expect(mock).toHaveBeenCalledTimes(2)
+
+        plus(10)
+
+        expect(mock).toHaveBeenCalledTimes(3)
+
+        plus(10)
+
+        expect(mock).toHaveBeenCalledTimes(3)
+
+        plus(5)
+
+        expect(mock).toHaveBeenCalledTimes(4)
+      })
     })
   })
 })

packages/core/src/selectors.ts

@@ -113,21 +113,21 @@ export function createSelectors<
 
   const resolvedSelectors = Object.keys(selectorDefinitions).reduce(
     (acc, selectorName: keyof TSelectorDefinitions) => {
-      const getDefinition = () => selectors[selectorName as string]
+      const definition = selectors[selectorName as string]
+      const memoizedDefinition = memoize(definition)
 
       const namedSelector = nameFunction(
         selectorName as string,
         (...args: any[]) => {
-          return getDefinition()(simpluxModule.getState(), ...args)
+          return memoizedDefinition(simpluxModule.getState(), ...args)
         },
       ) as ResolvedSelector<TState, TSelectorDefinitions[typeof selectorName]>
 
       acc[selectorName] = namedSelector
 
       const extras = namedSelector as Mutable<typeof namedSelector>
 
-      extras.withState = (state: TState, ...args: any[]) =>
-        getDefinition()(state, ...args)
+      extras.withState = memoizedDefinition
 
       extras.selectorName = selectorName as string
       extras.owningModule = simpluxModule
@@ -139,3 +139,24 @@ export function createSelectors<
 
   return resolvedSelectors
 }
+
+function memoize<TFunction extends Function>(fn: TFunction): TFunction {
+  let memoizedArgs: any[] | undefined
+  let memoizedResult: any
+
+  const memoizedFunction = (...args: any[]) => {
+    const memoizedResultNeedsToBeRefreshed =
+      !memoizedArgs ||
+      memoizedArgs.length !== args.length ||
+      !memoizedArgs.every((a, idx) => a === args[idx])
+
+    if (memoizedResultNeedsToBeRefreshed) {
+      memoizedArgs = args
+      memoizedResult = fn(...args)
+    }
+
+    return memoizedResult
+  }
+
+  return (memoizedFunction as unknown) as TFunction
+}

recipes/basics/computing-derived-state/README.md

@@ -27,7 +27,9 @@ const counterModule = createSimpluxModule({
 })
 ```
 
-To compute derived state for our module we can define so-called _selectors_. A selector is a pure function that takes the module's state - and optionally some additional arguments - and returns some derived value.
+To compute derived state for our module we can define so-called _selectors_. A selector is a [pure function](https://en.wikipedia.org/wiki/Pure_function) that takes the module's state - and optionally some additional arguments - and returns some derived value.
+
+> It is important that the selector is pure since it allows [memoizing](https://en.wikipedia.org/wiki/Memoization#Functional_programming) its result for efficiency (which **simplux** does for you automatically)
 
 ```ts
 import { createSelectors } from '@simplux/core'