Flush out useMemoCache API

facebook · Oct 14, 2022 · d3aa0d0 · d3aa0d0
1 parent 3b81432
commit d3aa0d0
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 8 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -46,6 +46,7 @@ import {
 import {
   REACT_CONTEXT_TYPE,
   REACT_SERVER_CONTEXT_TYPE,
+  REACT_USE_MEMO_CACHE_SENTINEL,
 } from 'shared/ReactSymbols';
 
 import {
@@ -845,8 +846,6 @@ function useMemoCache(size: number): Array<any> {
     memoCache = updateQueue.memoCache;
   }
   // Otherwise clone from the current fiber
-  // TODO: not sure how to access the current fiber here other than going through
-  // currentlyRenderingFiber.alternate
   if (memoCache == null) {
     const current: Fiber | null = currentlyRenderingFiber.alternate;
     if (current !== null) {
@@ -878,6 +877,9 @@ function useMemoCache(size: number): Array<any> {
   let data = memoCache.data[memoCache.index];
   if (data === undefined) {
     data = memoCache.data[memoCache.index] = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_USE_MEMO_CACHE_SENTINEL;
+    }
   } else if (data.length !== size) {
     // TODO: consider warning or throwing here
     if (__DEV__) {

diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -46,6 +46,7 @@ import {
 import {
   REACT_CONTEXT_TYPE,
   REACT_SERVER_CONTEXT_TYPE,
+  REACT_USE_MEMO_CACHE_SENTINEL,
 } from 'shared/ReactSymbols';
 
 import {
@@ -845,8 +846,6 @@ function useMemoCache(size: number): Array<any> {
     memoCache = updateQueue.memoCache;
   }
   // Otherwise clone from the current fiber
-  // TODO: not sure how to access the current fiber here other than going through
-  // currentlyRenderingFiber.alternate
   if (memoCache == null) {
     const current: Fiber | null = currentlyRenderingFiber.alternate;
     if (current !== null) {
@@ -878,6 +877,9 @@ function useMemoCache(size: number): Array<any> {
   let data = memoCache.data[memoCache.index];
   if (data === undefined) {
     data = memoCache.data[memoCache.index] = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_USE_MEMO_CACHE_SENTINEL;
+    }
   } else if (data.length !== size) {
     // TODO: consider warning or throwing here
     if (__DEV__) {

diff --git a/packages/react-reconciler/src/__tests__/useMemoCache-test.js b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
@@ -1,3 +1,5 @@
+const {REACT_USE_MEMO_CACHE_SENTINEL} = require('shared/ReactSymbols');
+
 let React;
 let ReactNoop;
 let act;
@@ -46,7 +48,7 @@ describe('useMemoCache()', () => {
       const cache = useMemoCache(1);
       expect(Array.isArray(cache)).toBe(true);
       expect(cache.length).toBe(1);
-      expect(cache[0]).toBe(undefined);
+      expect(cache[0]).toBe(REACT_USE_MEMO_CACHE_SENTINEL);
       return 'Ok';
     }
     const root = ReactNoop.createRoot();

diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
@@ -46,6 +46,7 @@ import is from 'shared/objectIs';
 import {
   REACT_SERVER_CONTEXT_TYPE,
   REACT_CONTEXT_TYPE,
+  REACT_USE_MEMO_CACHE_SENTINEL,
 } from 'shared/ReactSymbols';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -666,7 +667,11 @@ function useCacheRefresh(): <T>(?() => T, ?T) => void {
 }
 
 function useMemoCache(size: number): Array<any> {
-  return new Array(size);
+  const data = new Array(size);
+  for (let i = 0; i < size; i++) {
+    data[i] = REACT_USE_MEMO_CACHE_SENTINEL;
+  }
+  return data;
 }
 
 function noop(): void {}

diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
@@ -11,7 +11,10 @@ import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import type {Request} from './ReactFlightServer';
 import type {ReactServerContext, Thenable, Usable} from 'shared/ReactTypes';
 import type {ThenableState} from './ReactFlightWakeable';
-import {REACT_SERVER_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import {
+  REACT_SERVER_CONTEXT_TYPE,
+  REACT_USE_MEMO_CACHE_SENTINEL,
+} from 'shared/ReactSymbols';
 import {readContext as readContextImpl} from './ReactFlightNewContext';
 import {enableUseHook} from 'shared/ReactFeatureFlags';
 import {
@@ -90,7 +93,11 @@ export const HooksDispatcher: Dispatcher = {
     return unsupportedRefresh;
   },
   useMemoCache(size: number): Array<any> {
-    return new Array(size);
+    const data = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_USE_MEMO_CACHE_SENTINEL;
+    }
+    return data;
   },
   use: enableUseHook ? use : (unsupportedHook: any),
 };

diff --git a/packages/react/src/React.js b/packages/react/src/React.js
@@ -20,6 +20,7 @@ import {
   REACT_SCOPE_TYPE,
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
+  REACT_USE_MEMO_CACHE_SENTINEL,
 } from 'shared/ReactSymbols';
 
 import {Component, PureComponent} from './ReactBaseClasses';
@@ -139,6 +140,7 @@ export {
   REACT_CACHE_TYPE as unstable_Cache,
   use as experimental_use,
   useMemoCache as unstable_useMemoCache,
+  REACT_USE_MEMO_CACHE_SENTINEL as unstable_MemoCacheSentinel,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   // enableTransitionTracing

diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
@@ -45,6 +45,10 @@ export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED: symbol = Symbol.for(
   'react.default_value',
 );
 
+export const REACT_USE_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
+  'react.use_memo_cache_sentinel',
+);
+
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';