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

…acebook#28250) Adds a feature flag to control whether the client cache function is just a passthrough. before we land breaking changes for the next major it will be off and then we can flag it on when we want to break it. flag is off for OSS for now and on elsewhere (though the parent flag enableCache is off in some cases)
EdisonVan · Apr 15, 2024 · b35fe97 · b35fe97
1 parent 5ab59e2
commit b35fe97
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 135 deletions.
diff --git a/packages/react/src/ReactCacheClient.js b/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);
+  }
 }
diff --git a/packages/react/src/ReactCacheImpl.js b/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;
+    }
+  };
+}
diff --git a/packages/react/src/ReactCacheServer.js b/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';
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
@@ -166,6 +166,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
 //

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -91,6 +91,7 @@ export const enableFizzExternalRuntime = false;
 
 export const enableAsyncActions = false;
 export const enableUseDeferredValueInitialArg = true;
+export const disableClientCache = true;
 
 export const enableServerComponentKeys = true;
 

diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -83,6 +83,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
+export const disableClientCache = true;
 
 export const enableServerComponentKeys = true;
 

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -83,6 +83,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
+export const disableClientCache = true;
 
 export const enableServerComponentKeys = true;
 

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -80,6 +80,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
+export const disableClientCache = true;
 
 export const enableServerComponentKeys = true;
 

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -83,6 +83,7 @@ export const alwaysThrottleRetries = true;
 export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableUseDeferredValueInitialArg = true;
+export const disableClientCache = true;
 
 export const enableServerComponentKeys = true;
 

diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -110,6 +110,7 @@ export const useMicrotasksForSchedulingInFabric = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 
 export const enableAsyncDebugInfo = false;
+export const disableClientCache = true;
 
 export const enableServerComponentKeys = true;