feat(useMemoCache): useMemo with cache

README.md

@@ -159,6 +159,8 @@ Coming from `react-use`? Check out our
 
 - #### Miscellaneous
 
+  - [**`useMemoCache`**](https://react-hookz.github.io/web/?path=/docs/miscellaneous-useMemoCache--example)
+    — Like useMemo but with cache based on dependency list.
   - [**`useSyncedRef`**](https://react-hookz.github.io/web/?path=/docs/miscellaneous-usesyncedref--example)
     — Like `useRef`, but it returns an immutable ref that contains the actual value.
   - [**`useCustomCompareMemo`**](https://react-hookz.github.io/web/?path=/docs/miscellaneous-useCustomCompareMemo--example)

src/index.ts

@@ -50,6 +50,7 @@ export * from './useVibrate';
 export * from './useSyncedRef';
 export * from './useHookableRef';
 export * from './useCustomCompareMemo';
+export * from './useMemoCache';
 
 // SideEffect
 export * from './useLocalStorageValue';
@@ -75,6 +76,7 @@ export * from './useWindowSize';
 export { isStrictEqual, truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
 export { EffectCallback, EffectHook } from './util/misc';
 export { resolveHookState } from './util/resolveHookState';
+export { is, objectIs, areHookInputsEqual } from './util/areHookInputsEqual';
 
 // Types
 export * from './types';

src/useMemoCache/__docs__/example.stories.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useMemo, useRef, useState } from 'react';
+import { useMemoCache } from '../..';
+
+const dependencyListMapper = {
+  true: [1, 3],
+  false: [2, 4],
+};
+
+const getSummary = (numbers: number[]) => numbers.reduce((a, b) => a + b);
+
+const boolToString = (bool: boolean) => String(bool) as 'true' | 'false';
+
+export const Example: React.FC = () => {
+  const isTruthy = useRef(false);
+
+  const [dependencyList, setDependencyList] = useState(
+    () => dependencyListMapper[boolToString(isTruthy.current)]
+  );
+
+  const memoSpy = useRef(0);
+  const memoCacheSpy = useRef(0);
+
+  const memo = useMemo(() => {
+    memoSpy.current++;
+
+    return getSummary(dependencyList);
+  }, dependencyList);
+
+  const memoCache = useMemoCache(() => {
+    memoCacheSpy.current++;
+
+    return getSummary(dependencyList);
+  }, dependencyList);
+
+  const toggleDependencyList = () => {
+    isTruthy.current = !isTruthy.current;
+
+    setDependencyList(dependencyListMapper[boolToString(isTruthy.current)]);
+  };
+
+  return (
+    <div>
+      <section>
+        <h1>Memo</h1>
+        <p>summary: {memo}</p>
+        <p>calls: {memoSpy.current}</p>
+      </section>
+      <section>
+        <h1>Memo with cache</h1>
+        <p>summary: {memoCache}</p>
+        <p>calls: {memoCacheSpy.current}</p>
+      </section>
+      <button onClick={toggleDependencyList}>toggle dependency list</button>
+    </div>
+  );
+};

src/useMemoCache/__docs__/story.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './example.stories';
+import { ImportPath } from '../../__docs__/ImportPath';
+
+<Meta title="Miscellaneous/useMemoCache" component={Example} />
+
+# useMemoCache
+
+#### Example
+
+<Canvas>
+  <Story story={Example} inline />
+</Canvas>
+
+## Reference
+
+```ts
+function useMemoCache<State, Deps extends DependencyList>(factory: () => State, deps: Deps): State;
+```
+
+#### Importing
+
+<ImportPath />
+
+#### Arguments
+
+- **factory** _`() => unknown`_ - useMemo factory function.
+- **deps** _`DependencyList`_ - useMemo dependency list.

src/useMemoCache/__tests__/dom.ts

@@ -0,0 +1,209 @@
+import { renderHook } from '@testing-library/react-hooks/dom';
+import { DependencyList } from 'react';
+import { useMemoCache, createMemoCache } from '../..';
+
+describe('useMemoCache', () => {
+  it('should be defined', () => {
+    expect(useMemoCache).toBeDefined();
+  });
+
+  it('should render', () => {
+    const { result } = renderHook(() => useMemoCache(() => 10, []));
+    expect(result.error).toBeUndefined();
+  });
+
+  it('should return resolved state', () => {
+    const resolved = 'Hello World';
+    const lazyInitialize = () => resolved;
+
+    const {
+      result: { current },
+    } = renderHook(() => useMemoCache(lazyInitialize, []));
+
+    expect(current).toBe(resolved);
+  });
+
+  it('should not invoke factory when state is cached', () => {
+    const spy = jest.fn();
+    const { result, rerender } = renderHook(
+      ({ dependencyList }) => {
+        return useMemoCache(() => {
+          spy();
+
+          return dependencyList.reduce((a, b) => a + b);
+        }, dependencyList);
+      },
+      { initialProps: { dependencyList: [1, 2] } }
+    );
+
+    expect(result.current).toBe(3);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    rerender({ dependencyList: [3, 4] });
+
+    expect(result.current).toBe(7);
+    expect(spy).toHaveBeenCalledTimes(2);
+
+    rerender({ dependencyList: [1, 2] });
+
+    expect(result.current).toBe(3);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should invoke when state is not cached (reference case)', () => {
+    const spy = jest.fn();
+    const { result, rerender } = renderHook(
+      ({ dependencyList }) => {
+        return useMemoCache(() => {
+          spy();
+
+          return Object.values(dependencyList[0]);
+        }, dependencyList);
+      },
+      { initialProps: { dependencyList: [{ a: 1, b: 2 }] } }
+    );
+
+    expect(result.current).toEqual([1, 2]);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    rerender({ dependencyList: [{ a: 1, b: 2 }] });
+
+    expect(result.current).toEqual([1, 2]);
+    expect(spy).toHaveBeenCalledTimes(2);
+
+    rerender({ dependencyList: [{ a: 2, b: 3 }] });
+
+    expect(result.current).toEqual([2, 3]);
+    expect(spy).toHaveBeenCalledTimes(3);
+  });
+
+  it('should work with custom `areHookInputsEqual`', () => {
+    const spy = jest.fn();
+    const customAreHookInputsEqual = (nextDeps: DependencyList, prevDeps: DependencyList | null) =>
+      JSON.stringify(nextDeps) === JSON.stringify(prevDeps);
+
+    const { result, rerender } = renderHook(
+      ({ dependencyList }) => {
+        return useMemoCache(
+          () => {
+            spy();
+
+            return Object.values(dependencyList[0]);
+          },
+          dependencyList,
+          customAreHookInputsEqual
+        );
+      },
+      { initialProps: { dependencyList: [{ a: 1, b: 2 }] } }
+    );
+
+    expect(result.current).toEqual([1, 2]);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    rerender({ dependencyList: [{ a: 1, b: 2 }] });
+
+    expect(result.current).toEqual([1, 2]);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    rerender({ dependencyList: [{ a: 2, b: 3 }] });
+
+    expect(result.current).toEqual([2, 3]);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should handle unstable refference of `areHookInputsEqual`', () => {
+    const spy = jest.fn();
+    const initialDependencyList = [{ a: 1, b: 2 }];
+
+    const { result, rerender } = renderHook(
+      ({ dependencyList }) => {
+        return useMemoCache(
+          () => {
+            spy();
+
+            return Object.values(dependencyList[0]);
+          },
+          dependencyList,
+          (nextDeps: DependencyList, prevDeps: DependencyList | null) =>
+            JSON.stringify(nextDeps) === JSON.stringify(prevDeps)
+        );
+      },
+      { initialProps: { dependencyList: initialDependencyList } }
+    );
+
+    expect(result.current).toEqual([1, 2]);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    rerender({ dependencyList: initialDependencyList });
+
+    expect(result.current).toEqual([1, 2]);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  describe('createCache', () => {
+    it(`should return 'none' when there is no cached value`, () => {
+      const memoCache = createMemoCache();
+      const dependencyList = [1, 2];
+
+      const cachedValue = memoCache.get(dependencyList);
+
+      expect(memoCache.isNone(cachedValue)).toBeTruthy();
+    });
+
+    it('should return cached value', () => {
+      const memoCache = createMemoCache();
+
+      const dependencyList = [1, 2];
+      const value = Object.values(dependencyList);
+
+      memoCache.set(dependencyList, value);
+      const cachedValue = memoCache.get(dependencyList);
+
+      expect(cachedValue).toBe(value);
+      expect(memoCache.isNone(cachedValue)).toBeFalsy();
+    });
+
+    it('should compare dependency list like React', () => {
+      const memoCache = createMemoCache();
+
+      const dependencyList = [1, {}];
+      const value = Object.values(dependencyList);
+
+      memoCache.set(dependencyList, value);
+      const cachedValue1 = memoCache.get(dependencyList);
+
+      expect(cachedValue1).toBe(value);
+      expect(memoCache.isNone(cachedValue1)).toBeFalsy();
+
+      const cachedValue2 = memoCache.get([...dependencyList]);
+
+      expect(cachedValue2).toBe(value);
+      expect(memoCache.isNone(cachedValue2)).toBeFalsy();
+
+      const cachedValue3 = memoCache.get([1, {}]);
+
+      expect(memoCache.isNone(cachedValue3)).toBeTruthy();
+    });
+
+    it('should work with custom `areHookInputsEqual`', () => {
+      const memoCache = createMemoCache(
+        (nextDeps: DependencyList, prevDeps: DependencyList | null) =>
+          JSON.stringify(nextDeps) === JSON.stringify(prevDeps)
+      );
+
+      const dependencyList = [1, {}];
+      const value = Object.values(dependencyList);
+
+      memoCache.set(dependencyList, value);
+      const cachedValue1 = memoCache.get(dependencyList);
+
+      expect(cachedValue1).toBe(value);
+      expect(memoCache.isNone(cachedValue1)).toBeFalsy();
+
+      const cachedValue2 = memoCache.get([1, {}]);
+
+      expect(cachedValue2).toBe(value);
+      expect(memoCache.isNone(cachedValue1)).toBeFalsy();
+    });
+  });
+});

src/useMemoCache/__tests__/ssr.ts

@@ -0,0 +1,13 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useMemoCache } from '../..';
+
+describe('useMemoCache', () => {
+  it('should be defined', () => {
+    expect(useMemoCache).toBeDefined();
+  });
+
+  it('should render', () => {
+    const { result } = renderHook(() => useMemoCache(() => 10, []));
+    expect(result.error).toBeUndefined();
+  });
+});