[DevTools] Add support for useMemoCache

useMemoCache wasn't previously supported in the DevTools, so any attempt to inspect a component using the hook would result in a `dispatcher.useMemoCache is not a function (it is undefined)` error.
facebook · Apr 21, 2023 · ad0bd14 · ad0bd14
1 parent 967d46c
commit ad0bd14
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -15,6 +15,7 @@ import type {
   ReactProviderType,
   StartTransitionOptions,
 } from 'shared/ReactTypes';
+import {REACT_MEMO_CACHE_SENTINEL} from 'shared/ReactSymbols';
 import type {
   Fiber,
   Dispatcher as DispatcherType,
@@ -51,9 +52,19 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
+type MemoCache = {
+  data: Array<Array<any>>,
+  index: number,
+};
+
+type FunctionComponentUpdateQueue = {
+  memoCache?: MemoCache | null,
+};
+
 type Hook = {
   memoizedState: any,
   next: Hook | null,
+  updateQueue: FunctionComponentUpdateQueue | null,
 };
 
 function getPrimitiveStackCache(): Map<string, Array<any>> {
@@ -79,6 +90,10 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       Dispatcher.useDebugValue(null);
       Dispatcher.useCallback(() => {});
       Dispatcher.useMemo(() => null);
+      if (typeof Dispatcher.useMemoCache === 'function') {
+        // This type check is for Flow only.
+        Dispatcher.useMemoCache(0);
+      }
     } finally {
       readHookLog = hookLog;
       hookLog = [];
@@ -326,6 +341,37 @@ function useId(): string {
   return id;
 }
 
+function useMemoCache(size: number): Array<any> {
+  const hook = nextHook();
+  let memoCache: MemoCache;
+  if (
+    hook !== null &&
+    hook.updateQueue !== null &&
+    hook.updateQueue.memoCache != null
+  ) {
+    memoCache = hook.updateQueue.memoCache;
+  } else {
+    memoCache = {
+      data: [],
+      index: 0,
+    };
+  }
+
+  let data = memoCache.data[memoCache.index];
+  if (data === undefined) {
+    data = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_MEMO_CACHE_SENTINEL;
+    }
+  }
+  hookLog.push({
+    primitive: 'MemoCache',
+    stackError: new Error(),
+    value: data,
+  });
+  return data;
+}
+
 const Dispatcher: DispatcherType = {
   readContext,
   useCacheRefresh,
@@ -337,6 +383,7 @@ const Dispatcher: DispatcherType = {
   useLayoutEffect,
   useInsertionEffect,
   useMemo,
+  useMemoCache,
   useReducer,
   useRef,
   useState,

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -633,6 +633,41 @@ describe('ReactHooksInspectionIntegration', () => {
     });
   });
 
+  it('should support useMemoCache hook', () => {
+    function Foo() {
+      const $ = React.unstable_useMemoCache(1);
+      let t0;
+
+      if ($[0] === Symbol.for('react.memo_cache_sentinel')) {
+        t0 = <div>{1}</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+
+      return t0;
+    }
+
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(tree.length).toEqual(1);
+    expect(tree[0]).toMatchInlineSnapshot(`
+      {
+        "id": 0,
+        "isStateEditable": false,
+        "name": "MemoCache",
+        "subHooks": [],
+        "value": [
+          <div>
+            1
+          </div>,
+        ],
+      }
+    `);
+  });
+
   describe('useDebugValue', () => {
     it('should support inspectable values for multiple custom hooks', () => {
       function useLabeledValue(label) {