@samitouri / QOS-React-2 / commits / 9e67e7a315

Scaffolding for useMemoCache hook (#25123)

* Scaffolding for useMemoCache hook * cleanup leftovers from copy/paste of use() diff Co-authored-by: Andrew Clark <git@andrewclark.io>

Joseph Savona committed Aug 23, 2022 at 01:36 UTC 9e67e7a31582079263665fac0391220b99d8bb86
21 files changed +143 -1
packages/react-reconciler/src/ReactFiberHooks.new.js
+53
@@ -32,6 +32,7 @@ import {
32 enableLazyContextPropagation,
33 enableUseMutableSource,
34 enableTransitionTracing,
35 + enableUseMemoCacheHook,
36 } from 'shared/ReactFeatureFlags';
37
38 import {
@@ -721,6 +722,10 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
722 };
723 }
724
725 +function useMemoCache(size: number): Array<any> {
726 + throw new Error('Not implemented.');
727 +}
728 +
729 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
730 // $FlowFixMe: Flow doesn't like mixed types
731 return typeof action === 'function' ? action(state) : action;
@@ -2416,6 +2421,9 @@ if (enableCache) {
2421 (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
2422 (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
2423 }
2424 +if (enableUseMemoCacheHook) {
2425 + (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
2426 +}
2427
2428 const HooksDispatcherOnMount: Dispatcher = {
2429 readContext,
@@ -2444,6 +2452,9 @@ if (enableCache) {
2452 (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
2453 (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
2454 }
2455 +if (enableUseMemoCacheHook) {
2456 + (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
2457 +}
2458 const HooksDispatcherOnUpdate: Dispatcher = {
2459 readContext,
2460
@@ -2471,6 +2482,9 @@ if (enableCache) {
2482 (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
2483 (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
2484 }
2485 +if (enableUseMemoCacheHook) {
2486 + (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
2487 +}
2488
2489 const HooksDispatcherOnRerender: Dispatcher = {
2490 readContext,
@@ -2499,6 +2513,9 @@ if (enableCache) {
2513 (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
2514 (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
2515 }
2516 +if (enableUseMemoCacheHook) {
2517 + (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
2518 +}
2519
2520 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
2521 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2674,6 +2691,9 @@ if (__DEV__) {
2691 return mountRefresh();
2692 };
2693 }
2694 + if (enableUseMemoCacheHook) {
2695 + (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
2696 + }
2697
2698 HooksDispatcherOnMountWithHookTypesInDEV = {
2699 readContext<T>(context: ReactContext<T>): T {
@@ -2816,6 +2836,9 @@ if (__DEV__) {
2836 return mountRefresh();
2837 };
2838 }
2839 + if (enableUseMemoCacheHook) {
2840 + (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
2841 + }
2842
2843 HooksDispatcherOnUpdateInDEV = {
2844 readContext<T>(context: ReactContext<T>): T {
@@ -2958,6 +2981,9 @@ if (__DEV__) {
2981 return updateRefresh();
2982 };
2983 }
2984 + if (enableUseMemoCacheHook) {
2985 + (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
2986 + }
2987
2988 HooksDispatcherOnRerenderInDEV = {
2989 readContext<T>(context: ReactContext<T>): T {
@@ -3101,6 +3127,9 @@ if (__DEV__) {
3127 return updateRefresh();
3128 };
3129 }
3130 + if (enableUseMemoCacheHook) {
3131 + (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
3132 + }
3133
3134 InvalidNestedHooksDispatcherOnMountInDEV = {
3135 readContext<T>(context: ReactContext<T>): T {
@@ -3260,6 +3289,14 @@ if (__DEV__) {
3289 return mountRefresh();
3290 };
3291 }
3292 + if (enableUseMemoCacheHook) {
3293 + (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
3294 + size: number,
3295 + ): Array<any> {
3296 + warnInvalidHookAccess();
3297 + return useMemoCache(size);
3298 + };
3299 + }
3300
3301 InvalidNestedHooksDispatcherOnUpdateInDEV = {
3302 readContext<T>(context: ReactContext<T>): T {
@@ -3419,6 +3456,14 @@ if (__DEV__) {
3456 return updateRefresh();
3457 };
3458 }
3459 + if (enableUseMemoCacheHook) {
3460 + (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
3461 + size: number,
3462 + ): Array<any> {
3463 + warnInvalidHookAccess();
3464 + return useMemoCache(size);
3465 + };
3466 + }
3467
3468 InvalidNestedHooksDispatcherOnRerenderInDEV = {
3469 readContext<T>(context: ReactContext<T>): T {
@@ -3579,4 +3624,12 @@ if (__DEV__) {
3624 return updateRefresh();
3625 };
3626 }
3627 + if (enableUseMemoCacheHook) {
3628 + (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
3629 + size: number,
3630 + ): Array<any> {
3631 + warnInvalidHookAccess();
3632 + return useMemoCache(size);
3633 + };
3634 + }
3635 }
packages/react-reconciler/src/ReactFiberHooks.old.js
+53
@@ -32,6 +32,7 @@ import {
32 enableLazyContextPropagation,
33 enableUseMutableSource,
34 enableTransitionTracing,
35 + enableUseMemoCacheHook,
36 } from 'shared/ReactFeatureFlags';
37
38 import {
@@ -721,6 +722,10 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
722 };
723 }
724
725 +function useMemoCache(size: number): Array<any> {
726 + throw new Error('Not implemented.');
727 +}
728 +
729 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
730 // $FlowFixMe: Flow doesn't like mixed types
731 return typeof action === 'function' ? action(state) : action;
@@ -2416,6 +2421,9 @@ if (enableCache) {
2421 (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
2422 (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
2423 }
2424 +if (enableUseMemoCacheHook) {
2425 + (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
2426 +}
2427
2428 const HooksDispatcherOnMount: Dispatcher = {
2429 readContext,
@@ -2444,6 +2452,9 @@ if (enableCache) {
2452 (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
2453 (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
2454 }
2455 +if (enableUseMemoCacheHook) {
2456 + (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
2457 +}
2458 const HooksDispatcherOnUpdate: Dispatcher = {
2459 readContext,
2460
@@ -2471,6 +2482,9 @@ if (enableCache) {
2482 (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
2483 (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
2484 }
2485 +if (enableUseMemoCacheHook) {
2486 + (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
2487 +}
2488
2489 const HooksDispatcherOnRerender: Dispatcher = {
2490 readContext,
@@ -2499,6 +2513,9 @@ if (enableCache) {
2513 (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
2514 (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
2515 }
2516 +if (enableUseMemoCacheHook) {
2517 + (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
2518 +}
2519
2520 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
2521 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2674,6 +2691,9 @@ if (__DEV__) {
2691 return mountRefresh();
2692 };
2693 }
2694 + if (enableUseMemoCacheHook) {
2695 + (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
2696 + }
2697
2698 HooksDispatcherOnMountWithHookTypesInDEV = {
2699 readContext<T>(context: ReactContext<T>): T {
@@ -2816,6 +2836,9 @@ if (__DEV__) {
2836 return mountRefresh();
2837 };
2838 }
2839 + if (enableUseMemoCacheHook) {
2840 + (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
2841 + }
2842
2843 HooksDispatcherOnUpdateInDEV = {
2844 readContext<T>(context: ReactContext<T>): T {
@@ -2958,6 +2981,9 @@ if (__DEV__) {
2981 return updateRefresh();
2982 };
2983 }
2984 + if (enableUseMemoCacheHook) {
2985 + (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
2986 + }
2987
2988 HooksDispatcherOnRerenderInDEV = {
2989 readContext<T>(context: ReactContext<T>): T {
@@ -3101,6 +3127,9 @@ if (__DEV__) {
3127 return updateRefresh();
3128 };
3129 }
3130 + if (enableUseMemoCacheHook) {
3131 + (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
3132 + }
3133
3134 InvalidNestedHooksDispatcherOnMountInDEV = {
3135 readContext<T>(context: ReactContext<T>): T {
@@ -3260,6 +3289,14 @@ if (__DEV__) {
3289 return mountRefresh();
3290 };
3291 }
3292 + if (enableUseMemoCacheHook) {
3293 + (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
3294 + size: number,
3295 + ): Array<any> {
3296 + warnInvalidHookAccess();
3297 + return useMemoCache(size);
3298 + };
3299 + }
3300
3301 InvalidNestedHooksDispatcherOnUpdateInDEV = {
3302 readContext<T>(context: ReactContext<T>): T {
@@ -3419,6 +3456,14 @@ if (__DEV__) {
3456 return updateRefresh();
3457 };
3458 }
3459 + if (enableUseMemoCacheHook) {
3460 + (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
3461 + size: number,
3462 + ): Array<any> {
3463 + warnInvalidHookAccess();
3464 + return useMemoCache(size);
3465 + };
3466 + }
3467
3468 InvalidNestedHooksDispatcherOnRerenderInDEV = {
3469 readContext<T>(context: ReactContext<T>): T {
@@ -3579,4 +3624,12 @@ if (__DEV__) {
3624 return updateRefresh();
3625 };
3626 }
3627 + if (enableUseMemoCacheHook) {
3628 + (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
3629 + size: number,
3630 + ): Array<any> {
3631 + warnInvalidHookAccess();
3632 + return useMemoCache(size);
3633 + };
3634 + }
3635 }
packages/react-reconciler/src/ReactInternalTypes.js
+1
@@ -403,6 +403,7 @@ export type Dispatcher = {|
403 ): T,
404 useId(): string,
405 useCacheRefresh?: () => <T>(?() => T, ?T) => void,
406 + useMemoCache?: (size: number) => Array<any>,
407
408 unstable_isNewReconciler?: boolean,
409 |};
packages/react-server/src/ReactFizzHooks.js
+8 -1
@@ -25,7 +25,7 @@ import {getTreeId} from './ReactFizzTreeContext';
25
26 import {makeId} from './ReactServerFormatConfig';
27
28 -import {enableCache} from 'shared/ReactFeatureFlags';
28 +import {enableCache, enableUseMemoCacheHook} from 'shared/ReactFeatureFlags';
29 import is from 'shared/objectIs';
30
31 type BasicStateAction<S> = (S => S) | S;
@@ -537,6 +537,10 @@ function useCacheRefresh(): <T>(?() => T, ?T) => void {
537 return unsupportedRefresh;
538 }
539
540 +function useMemoCache(size: number): Array<any> {
541 + return new Array(size);
542 +}
543 +
544 function noop(): void {}
545
546 export const Dispatcher: DispatcherType = {
@@ -567,6 +571,9 @@ if (enableCache) {
571 Dispatcher.getCacheForType = getCacheForType;
572 Dispatcher.useCacheRefresh = useCacheRefresh;
573 }
574 +if (enableUseMemoCacheHook) {
575 + Dispatcher.useMemoCache = useMemoCache;
576 +}
577
578 export let currentResponseState: null | ResponseState = (null: any);
579 export function setCurrentResponseState(
packages/react-server/src/ReactFlightHooks.js
+3
@@ -78,6 +78,9 @@ export const Dispatcher: DispatcherType = {
78 useCacheRefresh(): <T>(?() => T, ?T) => void {
79 return unsupportedRefresh;
80 },
81 + useMemoCache(size: number): Array<any> {
82 + return new Array(size);
83 + },
84 };
85
86 function unsupportedHook(): void {
packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+1
@@ -46,6 +46,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
46 useMutableSource: unsupported,
47 useSyncExternalStore: unsupported,
48 useCacheRefresh: unsupported,
49 + useMemoCache: unsupported,
50 };
51 // Not using async/await because we don't compile it.
52 return new Promise((resolve, reject) => {
packages/react/index.classic.fb.js
+1
@@ -42,6 +42,7 @@ export {
42 unstable_getCacheSignal,
43 unstable_getCacheForType,
44 unstable_useCacheRefresh,
45 + unstable_useMemoCache,
46 useId,
47 useCallback,
48 useContext,
packages/react/index.experimental.js
+1
@@ -35,6 +35,7 @@ export {
35 unstable_getCacheSignal,
36 unstable_getCacheForType,
37 unstable_useCacheRefresh,
38 + unstable_useMemoCache,
39 useId,
40 useCallback,
41 useContext,
packages/react/index.js
+1
@@ -63,6 +63,7 @@ export {
63 unstable_getCacheSignal,
64 unstable_getCacheForType,
65 unstable_useCacheRefresh,
66 + unstable_useMemoCache,
67 useId,
68 useCallback,
69 useContext,
packages/react/index.modern.fb.js
+1
@@ -40,6 +40,7 @@ export {
40 unstable_getCacheSignal,
41 unstable_getCacheForType,
42 unstable_useCacheRefresh,
43 + unstable_useMemoCache,
44 useId,
45 useCallback,
46 useContext,
packages/react/src/React.js
+2
@@ -55,6 +55,7 @@ import {
55 useDeferredValue,
56 useId,
57 useCacheRefresh,
58 + useMemoCache,
59 } from './ReactHooks';
60 import {
61 createElementWithValidation,
@@ -127,6 +128,7 @@ export {
128 getCacheForType as unstable_getCacheForType,
129 useCacheRefresh as unstable_useCacheRefresh,
130 REACT_CACHE_TYPE as unstable_Cache,
131 + useMemoCache as unstable_useMemoCache,
132 // enableScopeAPI
133 REACT_SCOPE_TYPE as unstable_Scope,
134 // enableTransitionTracing
packages/react/src/ReactHooks.js
+6
@@ -204,3 +204,9 @@ export function useCacheRefresh(): <T>(?() => T, ?T) => void {
204 // $FlowFixMe This is unstable, thus optional
205 return dispatcher.useCacheRefresh();
206 }
207 +
208 +export function useMemoCache(size: number): Array<any> {
209 + const dispatcher = resolveDispatcher();
210 + // $FlowFixMe This is unstable, thus optional
211 + return dispatcher.useMemoCache(size);
212 +}
packages/shared/ReactFeatureFlags.js
+4
@@ -118,6 +118,10 @@ export const deletedTreeCleanUpLevel = 3;
118
119 export const enableFloat = __EXPERIMENTAL__;
120
121 +// Enables unstable_useMemoCache hook, intended as a compilation target for
122 +// auto-memoization.
123 +export const enableUseMemoCacheHook = __EXPERIMENTAL__;
124 +
125 // -----------------------------------------------------------------------------
126 // Chopping Block
127 //
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -50,6 +50,7 @@ export const warnAboutSpreadingKeyToJSX = false;
50 export const enableSuspenseAvoidThisFallback = false;
51 export const enableSuspenseAvoidThisFallbackFizz = false;
52 export const enableCPUSuspense = true;
53 +export const enableUseMemoCacheHook = false;
54 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
55 export const enableClientRenderFallbackOnTextMismatch = true;
56 export const enableComponentStackLocations = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
40 export const enableSuspenseAvoidThisFallback = false;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 +export const enableUseMemoCacheHook = false;
44 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
45 export const enableClientRenderFallbackOnTextMismatch = true;
46 export const enableComponentStackLocations = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
40 export const enableSuspenseAvoidThisFallback = false;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 +export const enableUseMemoCacheHook = false;
44 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
45 export const enableClientRenderFallbackOnTextMismatch = true;
46 export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
@@ -49,6 +49,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
49 export const enableSuspenseAvoidThisFallback = false;
50 export const enableSuspenseAvoidThisFallbackFizz = false;
51 export const enableCPUSuspense = false;
52 +export const enableUseMemoCacheHook = false;
53 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
54 export const enableClientRenderFallbackOnTextMismatch = true;
55 export const enableStrictEffects = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
40 export const enableSuspenseAvoidThisFallback = true;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 +export const enableUseMemoCacheHook = false;
44 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
45 export const enableClientRenderFallbackOnTextMismatch = true;
46 export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
40 export const enableSuspenseAvoidThisFallback = false;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 +export const enableUseMemoCacheHook = false;
44 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
45 export const enableClientRenderFallbackOnTextMismatch = true;
46 export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
40 export const enableSuspenseAvoidThisFallback = true;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = true;
43 +export const enableUseMemoCacheHook = false;
44 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
45 export const enableClientRenderFallbackOnTextMismatch = true;
46 export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -53,6 +53,7 @@ export const enableSuspenseAvoidThisFallback = true;
53 export const enableSuspenseAvoidThisFallbackFizz = false;
54 export const enableCPUSuspense = true;
55 export const enableFloat = false;
56 +export const enableUseMemoCacheHook = true;
57
58 // Logs additional User Timing API marks for use with an experimental profiling tool.
59 export const enableSchedulingProfiler =