From 2bc7d336ae7db689699baeb1fffc2c03d8753ffe Mon Sep 17 00:00:00 2001 From: Josh Story Date: Mon, 5 Feb 2024 16:32:03 -0800 Subject: [PATCH] Add flag to disable caching behavior of `React.cache` on the client (#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) --- packages/react/src/ReactCacheClient.js | 39 +++--- packages/react/src/ReactCacheImpl.js | 128 ++++++++++++++++++ packages/react/src/ReactCacheServer.js | 120 +--------------- packages/shared/ReactFeatureFlags.js | 3 + .../forks/ReactFeatureFlags.native-fb.js | 1 + .../forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.native.js | 1 + .../ReactFeatureFlags.test-renderer.www.js | 1 + .../shared/forks/ReactFeatureFlags.www.js | 1 + 10 files changed, 161 insertions(+), 135 deletions(-) create mode 100644 packages/react/src/ReactCacheImpl.js diff --git a/packages/react/src/ReactCacheClient.js b/packages/react/src/ReactCacheClient.js index e752a110a5..9e8658bdc8 100644 --- 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, 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 new file mode 100644 index 0000000000..c998aa4c87 --- /dev/null +++ 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 = { + s: 0, + v: void, + o: null | WeakMap>, + p: null | Map>, +}; + +type TerminatedCacheNode = { + s: 1, + v: T, + o: null | WeakMap>, + p: null | Map>, +}; + +type ErroredCacheNode = { + s: 2, + v: mixed, + o: null | WeakMap>, + p: null | Map>, +}; + +type CacheNode = + | TerminatedCacheNode + | UnterminatedCacheNode + | ErroredCacheNode; + +function createCacheRoot(): WeakMap> { + return new WeakMap(); +} + +function createCacheNode(): CacheNode { + 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, 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> = dispatcher.getCacheForType( + createCacheRoot, + ); + const fnNode = fnMap.get(fn); + let cacheNode: CacheNode; + 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 = (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 = (cacheNode: any); + erroredNode.s = ERRORED; + erroredNode.v = error; + throw error; + } + }; +} diff --git a/packages/react/src/ReactCacheServer.js b/packages/react/src/ReactCacheServer.js index c998aa4c87..dd90d8de2a 100644 --- 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 = { - s: 0, - v: void, - o: null | WeakMap>, - p: null | Map>, -}; - -type TerminatedCacheNode = { - s: 1, - v: T, - o: null | WeakMap>, - p: null | Map>, -}; - -type ErroredCacheNode = { - s: 2, - v: mixed, - o: null | WeakMap>, - p: null | Map>, -}; - -type CacheNode = - | TerminatedCacheNode - | UnterminatedCacheNode - | ErroredCacheNode; - -function createCacheRoot(): WeakMap> { - return new WeakMap(); -} - -function createCacheNode(): CacheNode { - 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, 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> = dispatcher.getCacheForType( - createCacheRoot, - ); - const fnNode = fnMap.get(fn); - let cacheNode: CacheNode; - 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 = (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 = (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 index 4540952129..689e265687 100644 --- 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 index 3557296c3c..2ff22ed405 100644 --- 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 index 7327cc0715..82a903537c 100644 --- 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 index 84520a9523..a09d5f1e2b 100644 --- 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 index 0d71df9d1a..ac23fa99c8 100644 --- 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 index ad6f368f49..c5e13f95e3 100644 --- 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 index 594e2cba49..7ae2da95cc 100644 --- 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;