DevTools: Add support for useOptimistic Hook

Author: Sebastian Silbermann

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

@@ -80,6 +80,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
         // This type check is for Flow only.
         Dispatcher.useMemoCache(0);
       }
+      Dispatcher.useOptimistic(0);
     } finally {
       readHookLog = hookLog;
       hookLog = [];
@@ -348,6 +349,25 @@ function useMemoCache(size: number): Array<any> {
   return data;
 }
 
+function useOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  const hook = nextHook();
+  let state;
+  if (hook !== null) {
+    state = hook.memoizedState;
+  } else {
+    state = passthrough;
+  }
+  hookLog.push({
+    primitive: 'Optimistic',
+    stackError: new Error(),
+    value: state,
+  });
+  return [state, (action: A) => {}];
+}
+
 const Dispatcher: DispatcherType = {
   use,
   readContext,
@@ -361,6 +381,7 @@ const Dispatcher: DispatcherType = {
   useInsertionEffect,
   useMemo,
   useMemoCache,
+  useOptimistic,
   useReducer,
   useRef,
   useState,

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

@@ -1106,4 +1106,41 @@ describe('ReactHooksInspectionIntegration', () => {
       },
     ]);
   });
+
+  it('should support useOptimistic hook', () => {
+    const useOptimistic = React.useOptimistic;
+    function Foo() {
+      const [value] = useOptimistic('abc', currentState => currentState);
+      React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
+      return value;
+    }
+
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(tree).toEqual([
+      {
+        id: 0,
+        isStateEditable: false,
+        name: 'Optimistic',
+        value: 'abc',
+        subHooks: [],
+      },
+      {
+        id: 1,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'memo',
+        subHooks: [],
+      },
+      {
+        id: 2,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'not used',
+        subHooks: [],
+      },
+    ]);
+  });
 });