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,106 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { useMemoCache } from '../..';
+
+export const Example: React.FC = () => {
+  const { initialFilters: filters, initialUsers: users } = useMemo(() => {
+    const initialFilters = {
+      none: 'none',
+      premiumCustomer: 'premium customer',
+      customer: 'customer',
+      guest: 'guest',
+    };
+
+    const initialUsers = [
+      {
+        name: 'James',
+        type: initialFilters.customer,
+      },
+      {
+        name: 'Robert',
+        type: initialFilters.premiumCustomer,
+      },
+      {
+        name: 'Mary',
+        type: initialFilters.guest,
+      },
+      {
+        name: 'Elizabeth',
+        type: initialFilters.customer,
+      },
+      {
+        name: 'Richard',
+        type: initialFilters.guest,
+      },
+    ];
+
+    return {
+      initialFilters,
+      initialUsers,
+    };
+  }, []);
+
+  const [selectedFilter, setSelectedFilter] = useState(filters.none);
+
+  const memoCalls = useRef(0);
+  const memoCacheCalls = useRef(0);
+
+  const memoUsers = useMemo(() => {
+    memoCalls.current++;
+
+    return users.filter((user) => selectedFilter === filters.none || user.type === selectedFilter);
+  }, [filters.none, selectedFilter, users]);
+  const memoCacheUsers = useMemoCache(() => {
+    memoCacheCalls.current++;
+
+    return users.filter((user) => selectedFilter === filters.none || user.type === selectedFilter);
+  }, [filters.none, selectedFilter, users]);
+
+  const listing = [
+    {
+      name: useMemoCache.name,
+      calls: memoCacheCalls.current,
+      listedUsers: memoCacheUsers,
+    },
+    {
+      name: useMemo.name,
+      calls: memoCalls.current,
+      listedUsers: memoUsers,
+    },
+  ];
+
+  const labelDomId = 'user-type';
+
+  return (
+    <section>
+      <h1>Example of useMemoCache</h1>
+      <div>
+        {listing.map(({ name, listedUsers, calls }) => (
+          <section key={name}>
+            <h2>
+              {name}: calls {calls}
+            </h2>
+            <ul>
+              {listedUsers.map((user) => (
+                <li>
+                  <p>
+                    {user.name}: {user.type}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+      </div>
+      <label htmlFor={labelDomId}>
+        select filter:{' '}
+        <select id={labelDomId} onChange={({ target: { value } }) => setSelectedFilter(value)}>
+          {Object.values(filters).map((filter) => (
+            <option selected={selectedFilter === filter} value={filter}>
+              {filter}
+            </option>
+          ))}
+        </select>
+      </label>
+    </section>
+  );
+};

src/useMemoCache/__docs__/story.mdx

@@ -0,0 +1,35 @@
+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
+
+Like useMemo but with cache based on dependency list.
+
+#### Example
+
+<Canvas>
+  <Story story={Example} inline />
+</Canvas>
+
+## Reference
+
+```ts
+function useMemoCache<State, Deps extends DependencyList>(
+  factory: () => State,
+  deps: Deps,
+  customAreHookInputsEqual?: (nextDeps: DependencyList, prevDeps: DependencyList | null) => boolean
+): State;
+```
+
+#### Importing
+
+<ImportPath />
+
+#### Arguments
+
+- **factory** _`() => unknown`_ - useMemo factory function
+- **deps** _`DependencyList`_ - useMemo dependency list
+- **customAreHookInputsEqual** _`(nextDeps: DependencyList, prevDeps: DependencyList | null) => boolean`_ - function which indicates when dependencies are the same