Add cache() API

Like memo() but longer lived.

Author: sebmarkbage

packages/react-reconciler/src/__tests__/ReactCache-test.js

@@ -2,16 +2,17 @@ let React;
 let ReactNoop;
 let Cache;
 let getCacheSignal;
-let getCacheForType;
 let Scheduler;
 let act;
 let Suspense;
 let Offscreen;
 let useCacheRefresh;
 let startTransition;
 let useState;
+let cache;
 
-let caches;
+let getTextCache;
+let textCaches;
 let seededCache;
 
 describe('ReactCache', () => {
@@ -24,66 +25,66 @@ describe('ReactCache', () => {
     Scheduler = require('scheduler');
     act = require('jest-react').act;
     Suspense = React.Suspense;
+    cache = React.experimental_cache;
     Offscreen = React.unstable_Offscreen;
     getCacheSignal = React.unstable_getCacheSignal;
-    getCacheForType = React.unstable_getCacheForType;
     useCacheRefresh = React.unstable_useCacheRefresh;
     startTransition = React.startTransition;
     useState = React.useState;
 
-    caches = [];
+    textCaches = [];
     seededCache = null;
-  });
 
-  function createTextCache() {
-    if (seededCache !== null) {
-      // Trick to seed a cache before it exists.
-      // TODO: Need a built-in API to seed data before the initial render (i.e.
-      // not a refresh because nothing has mounted yet).
-      const cache = seededCache;
-      seededCache = null;
-      return cache;
-    }
+    getTextCache = cache(() => {
+      if (seededCache !== null) {
+        // Trick to seed a cache before it exists.
+        // TODO: Need a built-in API to seed data before the initial render (i.e.
+        // not a refresh because nothing has mounted yet).
+        const textCache = seededCache;
+        seededCache = null;
+        return textCache;
+      }
 
-    const data = new Map();
-    const version = caches.length + 1;
-    const cache = {
-      version,
-      data,
-      resolve(text) {
-        const record = data.get(text);
-        if (record === undefined) {
-          const newRecord = {
-            status: 'resolved',
-            value: text,
-            cleanupScheduled: false,
-          };
-          data.set(text, newRecord);
-        } else if (record.status === 'pending') {
-          record.value.resolve();
-        }
-      },
-      reject(text, error) {
-        const record = data.get(text);
-        if (record === undefined) {
-          const newRecord = {
-            status: 'rejected',
-            value: error,
-            cleanupScheduled: false,
-          };
-          data.set(text, newRecord);
-        } else if (record.status === 'pending') {
-          record.value.reject();
-        }
-      },
-    };
-    caches.push(cache);
-    return cache;
-  }
+      const data = new Map();
+      const version = textCaches.length + 1;
+      const textCache = {
+        version,
+        data,
+        resolve(text) {
+          const record = data.get(text);
+          if (record === undefined) {
+            const newRecord = {
+              status: 'resolved',
+              value: text,
+              cleanupScheduled: false,
+            };
+            data.set(text, newRecord);
+          } else if (record.status === 'pending') {
+            record.value.resolve();
+          }
+        },
+        reject(text, error) {
+          const record = data.get(text);
+          if (record === undefined) {
+            const newRecord = {
+              status: 'rejected',
+              value: error,
+              cleanupScheduled: false,
+            };
+            data.set(text, newRecord);
+          } else if (record.status === 'pending') {
+            record.value.reject();
+          }
+        },
+      };
+      textCaches.push(textCache);
+      return textCache;
+    });
+  });
 
   function readText(text) {
     const signal = getCacheSignal();
-    const textCache = getCacheForType(createTextCache);
+    const textCache = getTextCache();
     const record = textCache.data.get(text);
     if (record !== undefined) {
       if (!record.cleanupScheduled) {
@@ -160,18 +161,18 @@ describe('ReactCache', () => {
 
   function seedNextTextCache(text) {
     if (seededCache === null) {
-      seededCache = createTextCache();
+      seededCache = getTextCache();
     }
     seededCache.resolve(text);
   }
 
   function resolveMostRecentTextCache(text) {
-    if (caches.length === 0) {
+    if (textCaches.length === 0) {
       throw Error('Cache does not exist.');
     } else {
       // Resolve the most recently created cache. An older cache can by
-      // resolved with `caches[index].resolve(text)`.
-      caches[caches.length - 1].resolve(text);
+      // resolved with `textCaches[index].resolve(text)`.
+      textCaches[textCaches.length - 1].resolve(text);
     }
   }
 
@@ -815,9 +816,18 @@ describe('ReactCache', () => {
 
   // @gate experimental || www
   test('refresh a cache with seed data', async () => {
-    let refresh;
+    let refreshWithSeed;
     function App() {
-      refresh = useCacheRefresh();
+      const refresh = useCacheRefresh();
+      const [seed, setSeed] = useState({fn: null});
+      if (seed.fn) {
+        seed.fn();
+        seed.fn = null;
+      }
+      refreshWithSeed = fn => {
+        setSeed({fn});
+        refresh();
+      };
       return <AsyncText showVersion={true} text="A" />;
     }
 
@@ -845,11 +855,14 @@ describe('ReactCache', () => {
     await act(async () => {
       // Refresh the cache with seeded data, like you would receive from a
       // server mutation.
-      // TODO: Seeding multiple typed caches. Should work by calling `refresh`
+      // TODO: Seeding multiple typed textCaches. Should work by calling `refresh`
       // multiple times with different key/value pairs
-      const cache = createTextCache();
-      cache.resolve('A');
-      startTransition(() => refresh(createTextCache, cache));
+      startTransition(() =>
+        refreshWithSeed(() => {
+          const textCache = getTextCache();
+          textCache.resolve('A');
+        }),
+      );
     });
     // The root should re-render without a cache miss.
     // The cache is not cleared up yet, since it's still reference by the root
@@ -1624,4 +1637,152 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['More']);
     expect(root).toMatchRenderedOutput(<div hidden={true}>More</div>);
   });
+
+  // @gate enableCache
+  it('cache objects and primitive arguments and a mix of them', async () => {
+    const root = ReactNoop.createRoot();
+    const types = cache((a, b) => ({a: typeof a, b: typeof b}));
+    function Print({a, b}) {
+      return types(a, b).a + ' ' + types(a, b).b + ' ';
+    }
+    function Same({a, b}) {
+      const x = types(a, b);
+      const y = types(a, b);
+      return (x === y).toString() + ' ';
+    }
+    function FlippedOrder({a, b}) {
+      return (types(a, b) === types(b, a)).toString() + ' ';
+    }
+    function FewerArgs({a, b}) {
+      return (types(a, b) === types(a)).toString() + ' ';
+    }
+    function MoreArgs({a, b}) {
+      return (types(a) === types(a, b)).toString() + ' ';
+    }
+    await act(async () => {
+      root.render(
+        <>
+          <Print a="e" b="f" />
+          <Same a="a" b="b" />
+          <FlippedOrder a="c" b="d" />
+          <FewerArgs a="e" b="f" />
+          <MoreArgs a="g" b="h" />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('string string true false false false ');
+    await act(async () => {
+      root.render(
+        <>
+          <Print a="e" b={null} />
+          <Same a="a" b={null} />
+          <FlippedOrder a="c" b={null} />
+          <FewerArgs a="e" b={null} />
+          <MoreArgs a="g" b={null} />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('string object true false false false ');
+    const obj = {};
+    await act(async () => {
+      root.render(
+        <>
+          <Print a="e" b={obj} />
+          <Same a="a" b={obj} />
+          <FlippedOrder a="c" b={obj} />
+          <FewerArgs a="e" b={obj} />
+          <MoreArgs a="g" b={obj} />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('string object true false false false ');
+    const sameObj = {};
+    await act(async () => {
+      root.render(
+        <>
+          <Print a={sameObj} b={sameObj} />
+          <Same a={sameObj} b={sameObj} />
+          <FlippedOrder a={sameObj} b={sameObj} />
+          <FewerArgs a={sameObj} b={sameObj} />
+          <MoreArgs a={sameObj} b={sameObj} />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('object object true true false false ');
+    const objA = {};
+    const objB = {};
+    await act(async () => {
+      root.render(
+        <>
+          <Print a={objA} b={objB} />
+          <Same a={objA} b={objB} />
+          <FlippedOrder a={objA} b={objB} />
+          <FewerArgs a={objA} b={objB} />
+          <MoreArgs a={objA} b={objB} />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('object object true false false false ');
+    const sameSymbol = Symbol();
+    await act(async () => {
+      root.render(
+        <>
+          <Print a={sameSymbol} b={sameSymbol} />
+          <Same a={sameSymbol} b={sameSymbol} />
+          <FlippedOrder a={sameSymbol} b={sameSymbol} />
+          <FewerArgs a={sameSymbol} b={sameSymbol} />
+          <MoreArgs a={sameSymbol} b={sameSymbol} />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('symbol symbol true true false false ');
+    const notANumber = +'nan';
+    await act(async () => {
+      root.render(
+        <>
+          <Print a={1} b={notANumber} />
+          <Same a={1} b={notANumber} />
+          <FlippedOrder a={1} b={notANumber} />
+          <FewerArgs a={1} b={notANumber} />
+          <MoreArgs a={1} b={notANumber} />
+        </>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('number number true false false false ');
+  });
+
+  // @gate enableCache
+  it('cached functions that throw should cache the error', async () => {
+    const root = ReactNoop.createRoot();
+    const throws = cache(v => {
+      throw new Error(v);
+    });
+    let x;
+    let y;
+    let z;
+    function Test() {
+      try {
+        throws(1);
+      } catch (e) {
+        x = e;
+      }
+      try {
+        throws(1);
+      } catch (e) {
+        y = e;
+      }
+      try {
+        throws(2);
+      } catch (e) {
+        z = e;
+      }
+
+      return 'Blank';
+    }
+    await act(async () => {
+      root.render(<Test />);
+    });
+    expect(x).toBe(y);
+    expect(z).not.toBe(x);
+  });
 });

packages/react/index.classic.fb.js

@@ -32,6 +32,7 @@ export {
   isValidElement,
   lazy,
   memo,
+  experimental_cache,
   startTransition,
   startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
   unstable_Cache,

packages/react/index.experimental.js

@@ -29,6 +29,7 @@ export {
   isValidElement,
   lazy,
   memo,
+  experimental_cache,
   startTransition,
   unstable_Cache,
   unstable_DebugTracingMode,

packages/react/index.js

@@ -54,6 +54,7 @@ export {
   isValidElement,
   lazy,
   memo,
+  experimental_cache,
   startTransition,
   unstable_Cache,
   unstable_DebugTracingMode,

packages/react/index.modern.fb.js

@@ -31,6 +31,7 @@ export {
   isValidElement,
   lazy,
   memo,
+  experimental_cache,
   startTransition,
   startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
   unstable_Cache,

packages/react/src/React.js

@@ -35,6 +35,7 @@ import {createContext} from './ReactContext';
 import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
+import {cache} from './ReactCache';
 import {
   getCacheSignal,
   getCacheForType,
@@ -100,6 +101,7 @@ export {
   forwardRef,
   lazy,
   memo,
+  cache as experimental_cache,
   useCallback,
   useContext,
   useEffect,