Scaffolding for useMemoCache hook (#25123)

* Scaffolding for useMemoCache hook
* cleanup leftovers from copy/paste of use() diff

Co-authored-by: Andrew Clark <[email protected]>

packages/react-reconciler/src/ReactFiberHooks.new.js

@@ -32,6 +32,7 @@ import {
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
+  enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -721,6 +722,10 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   };
 }
 
+function useMemoCache(size: number): Array<any> {
+  throw new Error('Not implemented.');
+}
+
 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
   // $FlowFixMe: Flow doesn't like mixed types
   return typeof action === 'function' ? action(state) : action;
@@ -2416,6 +2421,9 @@ if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
+if (enableUseMemoCacheHook) {
+  (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -2444,6 +2452,9 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
+}
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -2471,6 +2482,9 @@ if (enableCache) {
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2499,6 +2513,9 @@ if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2674,6 +2691,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2816,6 +2836,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2958,6 +2981,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3101,6 +3127,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3260,6 +3289,14 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3419,6 +3456,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3579,4 +3624,12 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 }

packages/react-reconciler/src/ReactFiberHooks.old.js

@@ -32,6 +32,7 @@ import {
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
+  enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -721,6 +722,10 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   };
 }
 
+function useMemoCache(size: number): Array<any> {
+  throw new Error('Not implemented.');
+}
+
 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
   // $FlowFixMe: Flow doesn't like mixed types
   return typeof action === 'function' ? action(state) : action;
@@ -2416,6 +2421,9 @@ if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
+if (enableUseMemoCacheHook) {
+  (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -2444,6 +2452,9 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
+}
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -2471,6 +2482,9 @@ if (enableCache) {
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2499,6 +2513,9 @@ if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2674,6 +2691,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2816,6 +2836,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2958,6 +2981,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3101,6 +3127,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3260,6 +3289,14 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3419,6 +3456,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3579,4 +3624,12 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 }

packages/react-reconciler/src/ReactInternalTypes.js

@@ -403,6 +403,7 @@ export type Dispatcher = {|
   ): T,
   useId(): string,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
+  useMemoCache?: (size: number) => Array<any>,
 
   unstable_isNewReconciler?: boolean,
 |};

packages/react-server/src/ReactFizzHooks.js

@@ -25,7 +25,7 @@ import {getTreeId} from './ReactFizzTreeContext';
 
 import {makeId} from './ReactServerFormatConfig';
 
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {enableCache, enableUseMemoCacheHook} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -537,6 +537,10 @@ function useCacheRefresh(): <T>(?() => T, ?T) => void {
   return unsupportedRefresh;
 }
 
+function useMemoCache(size: number): Array<any> {
+  return new Array(size);
+}
+
 function noop(): void {}
 
 export const Dispatcher: DispatcherType = {
@@ -567,6 +571,9 @@ if (enableCache) {
   Dispatcher.getCacheForType = getCacheForType;
   Dispatcher.useCacheRefresh = useCacheRefresh;
 }
+if (enableUseMemoCacheHook) {
+  Dispatcher.useMemoCache = useMemoCache;
+}
 
 export let currentResponseState: null | ResponseState = (null: any);
 export function setCurrentResponseState(

packages/react-server/src/ReactFlightHooks.js

@@ -78,6 +78,9 @@ export const Dispatcher: DispatcherType = {
   useCacheRefresh(): <T>(?() => T, ?T) => void {
     return unsupportedRefresh;
   },
+  useMemoCache(size: number): Array<any> {
+    return new Array(size);
+  },
 };
 
 function unsupportedHook(): void {

packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js

@@ -46,6 +46,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
+    useMemoCache: unsupported,
   };
   // Not using async/await because we don't compile it.
   return new Promise((resolve, reject) => {

packages/react/index.classic.fb.js

@@ -42,6 +42,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,

packages/react/index.experimental.js

@@ -35,6 +35,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,

packages/react/index.js

@@ -63,6 +63,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,

packages/react/index.modern.fb.js

@@ -40,6 +40,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,

packages/react/src/React.js

@@ -55,6 +55,7 @@ import {
   useDeferredValue,
   useId,
   useCacheRefresh,
+  useMemoCache,
 } from './ReactHooks';
 import {
   createElementWithValidation,
@@ -127,6 +128,7 @@ export {
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
+  useMemoCache as unstable_useMemoCache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   // enableTransitionTracing

packages/react/src/ReactHooks.js

@@ -204,3 +204,9 @@ export function useCacheRefresh(): <T>(?() => T, ?T) => void {
   // $FlowFixMe This is unstable, thus optional
   return dispatcher.useCacheRefresh();
 }
+
+export function useMemoCache(size: number): Array<any> {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.useMemoCache(size);
+}

packages/shared/ReactFeatureFlags.js

@@ -118,6 +118,10 @@ export const deletedTreeCleanUpLevel = 3;
 
 export const enableFloat = __EXPERIMENTAL__;
 
+// Enables unstable_useMemoCache hook, intended as a compilation target for
+// auto-memoization.
+export const enableUseMemoCacheHook = __EXPERIMENTAL__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //

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

@@ -50,6 +50,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;

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

@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;

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

@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;

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

@@ -49,6 +49,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;

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

@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;

packages/shared/forks/ReactFeatureFlags.testing.www.js

@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -53,6 +53,7 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableFloat = false;
+export const enableUseMemoCacheHook = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =