DevTools: Add support for use(Promise)

.eslintrc.js

@@ -450,6 +450,13 @@ module.exports = {
         __IS_EDGE__: 'readonly',
       },
     },
+    {
+      files: ['packages/react-devtools-shell/**/*.js'],
+      rules: {
+        // DevTools shell is an internal app not published to NPM
+        'react-internal/prod-error-codes': 'off',
+      },
+    },
   ],
 
   env: {

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

@@ -12,6 +12,7 @@ import type {
   ReactContext,
   ReactProviderType,
   StartTransitionOptions,
+  Thenable,
   Usable,
 } from 'shared/ReactTypes';
 import type {
@@ -122,14 +123,33 @@ function readContext<T>(context: ReactContext<T>): T {
   return context._currentValue;
 }
 
+function useThenable<T>(thenable: Thenable<T>): T {
+  switch (thenable.status) {
+    case 'fulfilled':
+      return thenable.value;
+    case 'rejected':
+      throw thenable.reason;
+    case 'pending':
+    default:
+      throw thenable;
+  }
+}
+
 function use<T>(usable: Usable<T>): T {
   if (usable !== null && typeof usable === 'object') {
     // $FlowFixMe[method-unbinding]
     if (typeof usable.then === 'function') {
-      // TODO: What should this do if it receives an unresolved promise?
-      throw new Error(
-        'Support for `use(Promise)` not yet implemented in react-debug-tools.',
-      );
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+      const value = useThenable(thenable);
+
+      hookLog.push({
+        primitive: 'Use',
+        stackError: new Error(),
+        value,
+      });
+
+      return value;
     } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
       const context: ReactContext<T> = (usable: any);
       const value = readContext(context);

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

@@ -13,13 +13,15 @@ import {
   forwardRef,
   Fragment,
   memo,
+  Suspense,
   useCallback,
   useContext,
   useDebugValue,
   useEffect,
   useOptimistic,
   useState,
   use,
+  useReducer,
 } from 'react';
 import {useFormState} from 'react-dom';
 
@@ -132,6 +134,55 @@ function Forms() {
   );
 }
 
+let promise = Promise.resolve('initial');
+function FunctionWithUse() {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  const [, rerender] = useReducer((n: number) => n + 1, 0);
+  const value = use(promise);
+
+  return (
+    <Fragment>
+      {value}
+      <form
+        onSubmit={event => {
+          event.preventDefault();
+          const delay = +event.target.elements.delay.value;
+          const shouldReject = event.target.elements.shouldReject.checked;
+          const settledValue = event.target.elements.settledValue.value;
+          promise = new Promise((resolve, reject) => {
+            setTimeout(() => {
+              if (shouldReject) {
+                reject(new Error(settledValue));
+              } else {
+                resolve(settledValue);
+              }
+            }, delay);
+          });
+          rerender();
+        }}>
+        <label>
+          delay
+          <input
+            name="delay"
+            type="text"
+            inputMode="numeric"
+            defaultValue={1000}
+          />
+        </label>
+        <label>
+          settled value
+          <input name="settledValue" type="text" />
+        </label>
+        <label>
+          reject
+          <input name="shouldReject" type="checkbox" defaultChecked={false} />
+        </label>
+        <button type="submit">Suspend</button>
+      </form>
+    </Fragment>
+  );
+}
+
 export default function CustomHooks(): React.Node {
   return (
     <Fragment>
@@ -140,6 +191,9 @@ export default function CustomHooks(): React.Node {
       <ForwardRefWithHooks />
       <HocWithHooks />
       <Forms />
+      <Suspense fallback="loading">
+        <FunctionWithUse />
+      </Suspense>
     </Fragment>
   );
 }