Devtools: Unwrap Promise in useFormState

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

@@ -494,16 +494,50 @@ function useFormState<S, P>(
   const hook = nextHook(); // FormState
   nextHook(); // ActionQueue
   let state;
+  let debugInfo = null;
   if (hook !== null) {
-    state = hook.memoizedState;
+    const actionResult = hook.memoizedState;
+    if (
+      typeof actionResult === 'object' &&
+      actionResult !== null &&
+      // $FlowFixMe[method-unbinding]
+      typeof actionResult.then === 'function'
+    ) {
+      const thenable: Thenable<Awaited<S>> = (actionResult: any);
+      switch (thenable.status) {
+        case 'fulfilled': {
+          state = thenable.value;
+          debugInfo =
+            thenable._debugInfo === undefined ? null : thenable._debugInfo;
+          break;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default:
+          // If this was an uncached Promise we have to abandon this attempt
+          // but we can still emit anything up until this point.
+          hookLog.push({
+            primitive: 'Unresolved',
+            stackError: new Error(),
+            value: thenable,
+            debugInfo:
+              thenable._debugInfo === undefined ? null : thenable._debugInfo,
+          });
+          throw SuspenseException;
+      }
+    } else {
+      state = (actionResult: any);
+    }
   } else {
     state = initialState;
   }
   hookLog.push({
     primitive: 'FormState',
     stackError: new Error(),
     value: state,
-    debugInfo: null,
+    debugInfo: debugInfo,
   });
   return [state, (payload: P) => {}];
 }

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

@@ -120,26 +120,72 @@ function wrapWithHoc(Component: (props: any, ref: React$Ref<any>) => any) {
 }
 const HocWithHooks = wrapWithHoc(FunctionWithHooks);
 
+function incrementWithDelay(previousState: number, formData: FormData) {
+  const incrementDelay = +formData.get('incrementDelay');
+  const shouldReject = formData.get('shouldReject');
+  const reason = formData.get('reason');
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (shouldReject) {
+        reject(reason);
+      } else {
+        resolve(previousState + 1);
+      }
+    }, incrementDelay);
+  });
+}
+
 function Forms() {
-  const [state, formAction] = useFormState((n: number, formData: FormData) => {
-    return n + 1;
-  }, 0);
+  const [state, formAction] = useFormState<any, any>(incrementWithDelay, 0);
   return (
     <form>
-      {state}
+      State: {state}&nbsp;
+      <label>
+        delay:
+        <input
+          name="incrementDelay"
+          defaultValue={5000}
+          type="text"
+          inputMode="numeric"
+        />
+      </label>
+      <label>
+        Reject:
+        <input name="reason" type="text" />
+        <input name="shouldReject" type="checkbox" />
+      </label>
       <button formAction={formAction}>Increment</button>
     </form>
   );
 }
 
+class ErrorBoundary extends React.Component<{children?: React$Node}> {
+  state: {error: any} = {error: null};
+  static getDerivedStateFromError(error: mixed): {error: any} {
+    return {error};
+  }
+  componentDidCatch(error: any, info: any) {
+    console.error(error, info);
+  }
+  render(): any {
+    if (this.state.error) {
+      return <div>Error: {String(this.state.error)}</div>;
+    }
+    return this.props.children;
+  }
+}
+
 export default function CustomHooks(): React.Node {
   return (
     <Fragment>
       <FunctionWithHooks />
       <MemoWithHooks />
       <ForwardRefWithHooks />
       <HocWithHooks />
-      <Forms />
+      <ErrorBoundary>
+        <Forms />
+      </ErrorBoundary>
     </Fragment>
   );
 }