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)
Josh Story committed
Feb 5, 2024 at 16:32 UTC
2bc7d336ae7db689699baeb1fffc2c03d8753ffe
10 files changed
+161
-135
packages/react/src/ReactCacheClient.js
+23
-16
@@ -7,21 +7,28 @@
7
* @flow
8
*/
9
10
+import {disableClientCache} from 'shared/ReactFeatureFlags';
11
+import {cache as cacheImpl} from './ReactCacheImpl';
12
+
13
export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
11
- // On the client (i.e. not a Server Components environment) `cache` has
12
- // no caching behavior. We just return the function as-is.
13
- //
14
- // We intend to implement client caching in a future major release. In the
15
- // meantime, it's only exposed as an API so that Shared Components can use
16
- // per-request caching on the server without breaking on the client. But it
17
- // does mean they need to be aware of the behavioral difference.
18
- //
19
- // The rest of the behavior is the same as the server implementation — it
20
- // returns a new reference, extra properties like `displayName` are not
21
- // preserved, the length of the new function is 0, etc. That way apps can't
22
- // accidentally depend on those details.
23
- return function () {
24
- // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
25
- return fn.apply(null, arguments);
26
- };
14
+ if (disableClientCache) {
15
+ // On the client (i.e. not a Server Components environment) `cache` has
16
+ // no caching behavior. We just return the function as-is.
17
+ //
18
+ // We intend to implement client caching in a future major release. In the
19
+ // meantime, it's only exposed as an API so that Shared Components can use
20
+ // per-request caching on the server without breaking on the client. But it
21
+ // does mean they need to be aware of the behavioral difference.
22
+ //
23
+ // The rest of the behavior is the same as the server implementation — it
24
+ // returns a new reference, extra properties like `displayName` are not
25
+ // preserved, the length of the new function is 0, etc. That way apps can't
26
+ // accidentally depend on those details.
27
+ return function () {
28
+ // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
29
+ return fn.apply(null, arguments);
30
+ };
31
+ } else {
32
+ return cacheImpl(fn);
33
+ }
34
}
packages/react/src/ReactCacheImpl.js
new
+128
@@ -0,0 +1,128 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import ReactCurrentCache from './ReactCurrentCache';
11
+
12
+const UNTERMINATED = 0;
13
+const TERMINATED = 1;
14
+const ERRORED = 2;
15
+
16
+type UnterminatedCacheNode<T> = {
17
+ s: 0,
18
+ v: void,
19
+ o: null | WeakMap<Function | Object, CacheNode<T>>,
20
+ p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
21
+};
22
+
23
+type TerminatedCacheNode<T> = {
24
+ s: 1,
25
+ v: T,
26
+ o: null | WeakMap<Function | Object, CacheNode<T>>,
27
+ p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
28
+};
29
+
30
+type ErroredCacheNode<T> = {
31
+ s: 2,
32
+ v: mixed,
33
+ o: null | WeakMap<Function | Object, CacheNode<T>>,
34
+ p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
35
+};
36
+
37
+type CacheNode<T> =
38
+ | TerminatedCacheNode<T>
39
+ | UnterminatedCacheNode<T>
40
+ | ErroredCacheNode<T>;
41
+
42
+function createCacheRoot<T>(): WeakMap<Function | Object, CacheNode<T>> {
43
+ return new WeakMap();
44
+}
45
+
46
+function createCacheNode<T>(): CacheNode<T> {
47
+ return {
48
+ s: UNTERMINATED, // status, represents whether the cached computation returned a value or threw an error
49
+ v: undefined, // value, either the cached result or an error, depending on s
50
+ o: null, // object cache, a WeakMap where non-primitive arguments are stored
51
+ p: null, // primitive cache, a regular Map where primitive arguments are stored.
52
+ };
53
+}
54
+
55
+export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
56
+ return function () {
57
+ const dispatcher = ReactCurrentCache.current;
58
+ if (!dispatcher) {
59
+ // If there is no dispatcher, then we treat this as not being cached.
60
+ // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
61
+ return fn.apply(null, arguments);
62
+ }
63
+ const fnMap: WeakMap<any, CacheNode<T>> = dispatcher.getCacheForType(
64
+ createCacheRoot,
65
+ );
66
+ const fnNode = fnMap.get(fn);
67
+ let cacheNode: CacheNode<T>;
68
+ if (fnNode === undefined) {
69
+ cacheNode = createCacheNode();
70
+ fnMap.set(fn, cacheNode);
71
+ } else {
72
+ cacheNode = fnNode;
73
+ }
74
+ for (let i = 0, l = arguments.length; i < l; i++) {
75
+ const arg = arguments[i];
76
+ if (
77
+ typeof arg === 'function' ||
78
+ (typeof arg === 'object' && arg !== null)
79
+ ) {
80
+ // Objects go into a WeakMap
81
+ let objectCache = cacheNode.o;
82
+ if (objectCache === null) {
83
+ cacheNode.o = objectCache = new WeakMap();
84
+ }
85
+ const objectNode = objectCache.get(arg);
86
+ if (objectNode === undefined) {
87
+ cacheNode = createCacheNode();
88
+ objectCache.set(arg, cacheNode);
89
+ } else {
90
+ cacheNode = objectNode;
91
+ }
92
+ } else {
93
+ // Primitives go into a regular Map
94
+ let primitiveCache = cacheNode.p;
95
+ if (primitiveCache === null) {
96
+ cacheNode.p = primitiveCache = new Map();
97
+ }
98
+ const primitiveNode = primitiveCache.get(arg);
99
+ if (primitiveNode === undefined) {
100
+ cacheNode = createCacheNode();
101
+ primitiveCache.set(arg, cacheNode);
102
+ } else {
103
+ cacheNode = primitiveNode;
104
+ }
105
+ }
106
+ }
107
+ if (cacheNode.s === TERMINATED) {
108
+ return cacheNode.v;
109
+ }
110
+ if (cacheNode.s === ERRORED) {
111
+ throw cacheNode.v;
112
+ }
113
+ try {
114
+ // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
115
+ const result = fn.apply(null, arguments);
116
+ const terminatedNode: TerminatedCacheNode<T> = (cacheNode: any);
117
+ terminatedNode.s = TERMINATED;
118
+ terminatedNode.v = result;
119
+ return result;
120
+ } catch (error) {
121
+ // We store the first error that's thrown and rethrow it.
122
+ const erroredNode: ErroredCacheNode<T> = (cacheNode: any);
123
+ erroredNode.s = ERRORED;
124
+ erroredNode.v = error;
125
+ throw error;
126
+ }
127
+ };
128
+}
packages/react/src/ReactCacheServer.js
+1
-119
@@ -7,122 +7,4 @@
7
* @flow
8
*/
9
10
-import ReactCurrentCache from './ReactCurrentCache';
11
-
12
-const UNTERMINATED = 0;
13
-const TERMINATED = 1;
14
-const ERRORED = 2;
15
-
16
-type UnterminatedCacheNode<T> = {
17
- s: 0,
18
- v: void,
19
- o: null | WeakMap<Function | Object, CacheNode<T>>,
20
- p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
21
-};
22
-
23
-type TerminatedCacheNode<T> = {
24
- s: 1,
25
- v: T,
26
- o: null | WeakMap<Function | Object, CacheNode<T>>,
27
- p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
28
-};
29
-
30
-type ErroredCacheNode<T> = {
31
- s: 2,
32
- v: mixed,
33
- o: null | WeakMap<Function | Object, CacheNode<T>>,
34
- p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
35
-};
36
-
37
-type CacheNode<T> =
38
- | TerminatedCacheNode<T>
39
- | UnterminatedCacheNode<T>
40
- | ErroredCacheNode<T>;
41
-
42
-function createCacheRoot<T>(): WeakMap<Function | Object, CacheNode<T>> {
43
- return new WeakMap();
44
-}
45
-
46
-function createCacheNode<T>(): CacheNode<T> {
47
- return {
48
- s: UNTERMINATED, // status, represents whether the cached computation returned a value or threw an error
49
- v: undefined, // value, either the cached result or an error, depending on s
50
- o: null, // object cache, a WeakMap where non-primitive arguments are stored
51
- p: null, // primitive cache, a regular Map where primitive arguments are stored.
52
- };
53
-}
54
-
55
-export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
56
- return function () {
57
- const dispatcher = ReactCurrentCache.current;
58
- if (!dispatcher) {
59
- // If there is no dispatcher, then we treat this as not being cached.
60
- // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
61
- return fn.apply(null, arguments);
62
- }
63
- const fnMap: WeakMap<any, CacheNode<T>> = dispatcher.getCacheForType(
64
- createCacheRoot,
65
- );
66
- const fnNode = fnMap.get(fn);
67
- let cacheNode: CacheNode<T>;
68
- if (fnNode === undefined) {
69
- cacheNode = createCacheNode();
70
- fnMap.set(fn, cacheNode);
71
- } else {
72
- cacheNode = fnNode;
73
- }
74
- for (let i = 0, l = arguments.length; i < l; i++) {
75
- const arg = arguments[i];
76
- if (
77
- typeof arg === 'function' ||
78
- (typeof arg === 'object' && arg !== null)
79
- ) {
80
- // Objects go into a WeakMap
81
- let objectCache = cacheNode.o;
82
- if (objectCache === null) {
83
- cacheNode.o = objectCache = new WeakMap();
84
- }
85
- const objectNode = objectCache.get(arg);
86
- if (objectNode === undefined) {
87
- cacheNode = createCacheNode();
88
- objectCache.set(arg, cacheNode);
89
- } else {
90
- cacheNode = objectNode;
91
- }
92
- } else {
93
- // Primitives go into a regular Map
94
- let primitiveCache = cacheNode.p;
95
- if (primitiveCache === null) {
96
- cacheNode.p = primitiveCache = new Map();
97
- }
98
- const primitiveNode = primitiveCache.get(arg);
99
- if (primitiveNode === undefined) {
100
- cacheNode = createCacheNode();
101
- primitiveCache.set(arg, cacheNode);
102
- } else {
103
- cacheNode = primitiveNode;
104
- }
105
- }
106
- }
107
- if (cacheNode.s === TERMINATED) {
108
- return cacheNode.v;
109
- }
110
- if (cacheNode.s === ERRORED) {
111
- throw cacheNode.v;
112
- }
113
- try {
114
- // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
115
- const result = fn.apply(null, arguments);
116
- const terminatedNode: TerminatedCacheNode<T> = (cacheNode: any);
117
- terminatedNode.s = TERMINATED;
118
- terminatedNode.v = result;
119
- return result;
120
- } catch (error) {
121
- // We store the first error that's thrown and rethrow it.
122
- const erroredNode: ErroredCacheNode<T> = (cacheNode: any);
123
- erroredNode.s = ERRORED;
124
- erroredNode.v = error;
125
- throw error;
126
- }
127
- };
128
-}
10
+export {cache} from './ReactCacheImpl';
packages/shared/ReactFeatureFlags.js
+3
@@ -166,6 +166,9 @@ export const enableCustomElementPropertySupport = __NEXT_MAJOR__;
166
// request for certain browsers.
167
export const enableFilterEmptyStringAttributesDOM = __NEXT_MAJOR__;
168
169
+// Disabled caching behavior of `react/cache` in client runtimes.
170
+export const disableClientCache = false;
171
+
172
// -----------------------------------------------------------------------------
173
// Chopping Block
174
//
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -91,6 +91,7 @@ export const enableFizzExternalRuntime = false;
91
92
export const enableAsyncActions = false;
93
export const enableUseDeferredValueInitialArg = true;
94
+export const disableClientCache = true;
95
96
export const enableServerComponentKeys = true;
97
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -83,6 +83,7 @@ export const alwaysThrottleRetries = true;
83
export const useMicrotasksForSchedulingInFabric = false;
84
export const passChildrenWhenCloningPersistedNodes = false;
85
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
86
+export const disableClientCache = true;
87
88
export const enableServerComponentKeys = true;
89
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -83,6 +83,7 @@ export const alwaysThrottleRetries = true;
83
export const useMicrotasksForSchedulingInFabric = false;
84
export const passChildrenWhenCloningPersistedNodes = false;
85
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
86
+export const disableClientCache = true;
87
88
export const enableServerComponentKeys = true;
89
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
@@ -80,6 +80,7 @@ export const alwaysThrottleRetries = true;
80
export const useMicrotasksForSchedulingInFabric = false;
81
export const passChildrenWhenCloningPersistedNodes = false;
82
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
83
+export const disableClientCache = true;
84
85
export const enableServerComponentKeys = true;
86
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -83,6 +83,7 @@ export const alwaysThrottleRetries = true;
83
export const useMicrotasksForSchedulingInFabric = false;
84
export const passChildrenWhenCloningPersistedNodes = false;
85
export const enableUseDeferredValueInitialArg = true;
86
+export const disableClientCache = true;
87
88
export const enableServerComponentKeys = true;
89
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -110,6 +110,7 @@ export const useMicrotasksForSchedulingInFabric = false;
110
export const passChildrenWhenCloningPersistedNodes = false;
111
112
export const enableAsyncDebugInfo = false;
113
+export const disableClientCache = true;
114
115
export const enableServerComponentKeys = true;
116