fix[devtools/useMemoCache]: useMemoCache as a non-inspectable stub for DevTools

Author: hoxyq

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -48,19 +48,9 @@ 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>> {
@@ -327,36 +317,12 @@ function useId(): string {
   return id;
 }
 
+// useMemoCache is an implementation detail of Forget's memoization
+// it should not be called directly in user-generated code
+// we keep it as a stub for dispatcher
 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) {
-    const MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel');
-    data = new Array(size);
-    for (let i = 0; i < size; i++) {
-      data[i] = MEMO_CACHE_SENTINEL;
-    }
-  }
-  hookLog.push({
-    primitive: 'MemoCache',
-    stackError: new Error(),
-    value: data,
-  });
-  return data;
+  nextHook();
+  return [];
 }
 
 const Dispatcher: DispatcherType = {
@@ -725,7 +691,7 @@ export function inspectHooks<Props>(
   renderFunction: Props => React$Node,
   props: Props,
   currentDispatcher: ?CurrentDispatcherRef,
-  includeHooksSource?: boolean = false,
+  includeHooksSource: boolean = false,
 ): HooksTree {
   // DevTools will pass the current renderer's injected dispatcher.
   // Other apps might compile debug hooks as part of their app though.
@@ -816,7 +782,7 @@ function resolveDefaultProps(Component: any, baseProps: any) {
 export function inspectHooksOfFiber(
   fiber: Fiber,
   currentDispatcher: ?CurrentDispatcherRef,
-  includeHooksSource?: boolean = false,
+  includeHooksSource: boolean = false,
 ): HooksTree {
   // DevTools will pass the current renderer's injected dispatcher.
   // Other apps might compile debug hooks as part of their app though.

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -636,7 +636,7 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   // @gate enableUseMemoCacheHook
-  it('should support useMemoCache hook', () => {
+  it('useMemoCache should not be inspectable', () => {
     function Foo() {
       const $ = useMemoCache(1);
       let t0;
@@ -655,11 +655,7 @@ describe('ReactHooksInspectionIntegration', () => {
     const childFiber = renderer.root.findByType(Foo)._currentFiber();
     const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
 
-    expect(tree.length).toEqual(1);
-    expect(tree[0].isStateEditable).toBe(false);
-    expect(tree[0].name).toBe('MemoCache');
-    expect(tree[0].value).toHaveLength(1);
-    expect(tree[0].value[0]).toEqual(<div>{1}</div>);
+    expect(tree.length).toEqual(0);
   });
 
   describe('useDebugValue', () => {

packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js

@@ -18,6 +18,7 @@ import EdgeCaseObjects from './EdgeCaseObjects.js';
 import NestedProps from './NestedProps';
 import SimpleValues from './SimpleValues';
 import SymbolKeys from './SymbolKeys';
+import UseMemoCache from './UseMemoCache';
 
 // TODO Add Immutable JS example
 
@@ -34,6 +35,7 @@ export default function InspectableElements(): React.Node {
       <EdgeCaseObjects />
       <CircularReferences />
       <SymbolKeys />
+      <UseMemoCache />
     </Fragment>
   );
 }

packages/react-devtools-shell/src/app/InspectableElements/UseMemoCache.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default function UseMemoCache(): React.Node {
+  React.unstable_useMemoCache(1);
+
+  return null;
+}