Add flag to disable caching behavior of React.cache on the client

packages/react/src/ReactCacheClient.js

@@ -7,21 +7,28 @@
  * @flow
  */
 
+import {disableClientCache} from 'shared/ReactFeatureFlags';
+import {cache as cacheImpl} from './ReactCacheImpl';
+
 export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
-  // On the client (i.e. not a Server Components environment) `cache` has
-  // no caching behavior. We just return the function as-is.
-  //
-  // We intend to implement client caching in a future major release. In the
-  // meantime, it's only exposed as an API so that Shared Components can use
-  // per-request caching on the server without breaking on the client. But it
-  // does mean they need to be aware of the behavioral difference.
-  //
-  // The rest of the behavior is the same as the server implementation — it
-  // returns a new reference, extra properties like `displayName` are not
-  // preserved, the length of the new function is 0, etc. That way apps can't
-  // accidentally depend on those details.
-  return function () {
-    // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
-    return fn.apply(null, arguments);
-  };
+  if (disableClientCache) {
+    // On the client (i.e. not a Server Components environment) `cache` has
+    // no caching behavior. We just return the function as-is.
+    //
+    // We intend to implement client caching in a future major release. In the
+    // meantime, it's only exposed as an API so that Shared Components can use
+    // per-request caching on the server without breaking on the client. But it
+    // does mean they need to be aware of the behavioral difference.
+    //
+    // The rest of the behavior is the same as the server implementation — it
+    // returns a new reference, extra properties like `displayName` are not
+    // preserved, the length of the new function is 0, etc. That way apps can't
+    // accidentally depend on those details.
+    return function () {
+      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
+      return fn.apply(null, arguments);
+    };
+  } else {
+    return cacheImpl(fn);
+  }
 }

packages/react/src/ReactCacheImpl.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import ReactCurrentCache from './ReactCurrentCache';
+
+const UNTERMINATED = 0;
+const TERMINATED = 1;
+const ERRORED = 2;
+
+type UnterminatedCacheNode<T> = {
+  s: 0,
+  v: void,
+  o: null | WeakMap<Function | Object, CacheNode<T>>,
+  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
+};
+
+type TerminatedCacheNode<T> = {
+  s: 1,
+  v: T,
+  o: null | WeakMap<Function | Object, CacheNode<T>>,
+  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
+};
+
+type ErroredCacheNode<T> = {
+  s: 2,
+  v: mixed,
+  o: null | WeakMap<Function | Object, CacheNode<T>>,
+  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
+};
+
+type CacheNode<T> =
+  | TerminatedCacheNode<T>
+  | UnterminatedCacheNode<T>
+  | ErroredCacheNode<T>;
+
+function createCacheRoot<T>(): WeakMap<Function | Object, CacheNode<T>> {
+  return new WeakMap();
+}
+
+function createCacheNode<T>(): CacheNode<T> {
+  return {
+    s: UNTERMINATED, // status, represents whether the cached computation returned a value or threw an error
+    v: undefined, // value, either the cached result or an error, depending on s
+    o: null, // object cache, a WeakMap where non-primitive arguments are stored
+    p: null, // primitive cache, a regular Map where primitive arguments are stored.
+  };
+}
+
+export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
+  return function () {
+    const dispatcher = ReactCurrentCache.current;
+    if (!dispatcher) {
+      // If there is no dispatcher, then we treat this as not being cached.
+      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
+      return fn.apply(null, arguments);
+    }
+    const fnMap: WeakMap<any, CacheNode<T>> = dispatcher.getCacheForType(
+      createCacheRoot,
+    );
+    const fnNode = fnMap.get(fn);
+    let cacheNode: CacheNode<T>;
+    if (fnNode === undefined) {
+      cacheNode = createCacheNode();
+      fnMap.set(fn, cacheNode);
+    } else {
+      cacheNode = fnNode;
+    }
+    for (let i = 0, l = arguments.length; i < l; i++) {
+      const arg = arguments[i];
+      if (
+        typeof arg === 'function' ||
+        (typeof arg === 'object' && arg !== null)
+      ) {
+        // Objects go into a WeakMap
+        let objectCache = cacheNode.o;
+        if (objectCache === null) {
+          cacheNode.o = objectCache = new WeakMap();
+        }
+        const objectNode = objectCache.get(arg);
+        if (objectNode === undefined) {
+          cacheNode = createCacheNode();
+          objectCache.set(arg, cacheNode);
+        } else {
+          cacheNode = objectNode;
+        }
+      } else {
+        // Primitives go into a regular Map
+        let primitiveCache = cacheNode.p;
+        if (primitiveCache === null) {
+          cacheNode.p = primitiveCache = new Map();
+        }
+        const primitiveNode = primitiveCache.get(arg);
+        if (primitiveNode === undefined) {
+          cacheNode = createCacheNode();
+          primitiveCache.set(arg, cacheNode);
+        } else {
+          cacheNode = primitiveNode;
+        }
+      }
+    }
+    if (cacheNode.s === TERMINATED) {
+      return cacheNode.v;
+    }
+    if (cacheNode.s === ERRORED) {
+      throw cacheNode.v;
+    }
+    try {
+      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
+      const result = fn.apply(null, arguments);
+      const terminatedNode: TerminatedCacheNode<T> = (cacheNode: any);
+      terminatedNode.s = TERMINATED;
+      terminatedNode.v = result;
+      return result;
+    } catch (error) {
+      // We store the first error that's thrown and rethrow it.
+      const erroredNode: ErroredCacheNode<T> = (cacheNode: any);
+      erroredNode.s = ERRORED;
+      erroredNode.v = error;
+      throw error;
+    }
+  };
+}

packages/react/src/ReactCacheServer.js

@@ -7,122 +7,4 @@
  * @flow
  */
 
-import ReactCurrentCache from './ReactCurrentCache';
-
-const UNTERMINATED = 0;
-const TERMINATED = 1;
-const ERRORED = 2;
-
-type UnterminatedCacheNode<T> = {
-  s: 0,
-  v: void,
-  o: null | WeakMap<Function | Object, CacheNode<T>>,
-  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
-};
-
-type TerminatedCacheNode<T> = {
-  s: 1,
-  v: T,
-  o: null | WeakMap<Function | Object, CacheNode<T>>,
-  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
-};
-
-type ErroredCacheNode<T> = {
-  s: 2,
-  v: mixed,
-  o: null | WeakMap<Function | Object, CacheNode<T>>,
-  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
-};
-
-type CacheNode<T> =
-  | TerminatedCacheNode<T>
-  | UnterminatedCacheNode<T>
-  | ErroredCacheNode<T>;
-
-function createCacheRoot<T>(): WeakMap<Function | Object, CacheNode<T>> {
-  return new WeakMap();
-}
-
-function createCacheNode<T>(): CacheNode<T> {
-  return {
-    s: UNTERMINATED, // status, represents whether the cached computation returned a value or threw an error
-    v: undefined, // value, either the cached result or an error, depending on s
-    o: null, // object cache, a WeakMap where non-primitive arguments are stored
-    p: null, // primitive cache, a regular Map where primitive arguments are stored.
-  };
-}
-
-export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
-  return function () {
-    const dispatcher = ReactCurrentCache.current;
-    if (!dispatcher) {
-      // If there is no dispatcher, then we treat this as not being cached.
-      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
-      return fn.apply(null, arguments);
-    }
-    const fnMap: WeakMap<any, CacheNode<T>> = dispatcher.getCacheForType(
-      createCacheRoot,
-    );
-    const fnNode = fnMap.get(fn);
-    let cacheNode: CacheNode<T>;
-    if (fnNode === undefined) {
-      cacheNode = createCacheNode();
-      fnMap.set(fn, cacheNode);
-    } else {
-      cacheNode = fnNode;
-    }
-    for (let i = 0, l = arguments.length; i < l; i++) {
-      const arg = arguments[i];
-      if (
-        typeof arg === 'function' ||
-        (typeof arg === 'object' && arg !== null)
-      ) {
-        // Objects go into a WeakMap
-        let objectCache = cacheNode.o;
-        if (objectCache === null) {
-          cacheNode.o = objectCache = new WeakMap();
-        }
-        const objectNode = objectCache.get(arg);
-        if (objectNode === undefined) {
-          cacheNode = createCacheNode();
-          objectCache.set(arg, cacheNode);
-        } else {
-          cacheNode = objectNode;
-        }
-      } else {
-        // Primitives go into a regular Map
-        let primitiveCache = cacheNode.p;
-        if (primitiveCache === null) {
-          cacheNode.p = primitiveCache = new Map();
-        }
-        const primitiveNode = primitiveCache.get(arg);
-        if (primitiveNode === undefined) {
-          cacheNode = createCacheNode();
-          primitiveCache.set(arg, cacheNode);
-        } else {
-          cacheNode = primitiveNode;
-        }
-      }
-    }
-    if (cacheNode.s === TERMINATED) {
-      return cacheNode.v;
-    }
-    if (cacheNode.s === ERRORED) {
-      throw cacheNode.v;
-    }
-    try {
-      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
-      const result = fn.apply(null, arguments);
-      const terminatedNode: TerminatedCacheNode<T> = (cacheNode: any);
-      terminatedNode.s = TERMINATED;
-      terminatedNode.v = result;
-      return result;
-    } catch (error) {
-      // We store the first error that's thrown and rethrow it.
-      const erroredNode: ErroredCacheNode<T> = (cacheNode: any);
-      erroredNode.s = ERRORED;
-      erroredNode.v = error;
-      throw error;
-    }
-  };
-}
+export {cache} from './ReactCacheImpl';

packages/shared/ReactFeatureFlags.js

@@ -164,6 +164,9 @@ export const enableCustomElementPropertySupport = __NEXT_MAJOR__;
 // request for certain browsers.
 export const enableFilterEmptyStringAttributesDOM = __NEXT_MAJOR__;
 
+// Disabled caching behavior of `react/cache` in client runtimes.
+export const disableClientCache = false;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -92,6 +92,7 @@ export const enableFizzExternalRuntime = false;
 
 export const enableAsyncActions = false;
 export const enableUseDeferredValueInitialArg = true;
+export const disableClientCache = true;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -84,6 +84,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
+export const disableClientCache = true;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -84,6 +84,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
+export const disableClientCache = true;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.native.js

@@ -81,6 +81,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
+export const disableClientCache = true;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -84,6 +84,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = true;
+export const disableClientCache = true;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.www.js

@@ -111,6 +111,7 @@ export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 
 export const enableAsyncDebugInfo = false;
+export const disableClientCache = true;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);