{"files":[{"status":"M","path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js"},{"status":"M","path":"packages\/react-devtools-shell\/src\/app\/InspectableElements\/CustomHooks.js"}],"commit":{"authorName":"Sebastian Silbermann","subject":"Devtools: Unwrap Promise in useFormState (#28319)","revision":"fb10a2c66a923d218471b535fdaf0dbc530417ee","shortRevision":"fb10a2c66a","authorEmail":"silbermann.sebastian@gmail.com","authoredAt":"2024-02-28T23:52:59+01:00"},"parents":["01ab35a9a731dec69995fbd28f3ac7eaad11e183"],"body":"","patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 487aebe630..446ac84631 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -521,19 +521,62 @@ function useFormState(\n ): [Awaited, (P) => void] {\n const hook = nextHook(); \/\/ FormState\n nextHook(); \/\/ ActionQueue\n- let state;\n+ const stackError = new Error();\n+ let value;\n+ let debugInfo = null;\n+ let error = null;\n+\n if (hook !== null) {\n- state = hook.memoizedState;\n+ const actionResult = hook.memoizedState;\n+ if (\n+ typeof actionResult === 'object' &&\n+ actionResult !== null &&\n+ \/\/ $FlowFixMe[method-unbinding]\n+ typeof actionResult.then === 'function'\n+ ) {\n+ const thenable: Thenable> = (actionResult: any);\n+ switch (thenable.status) {\n+ case 'fulfilled': {\n+ value = thenable.value;\n+ debugInfo =\n+ thenable._debugInfo === undefined ? null : thenable._debugInfo;\n+ break;\n+ }\n+ case 'rejected': {\n+ const rejectedError = thenable.reason;\n+ error = rejectedError;\n+ break;\n+ }\n+ default:\n+ \/\/ If this was an uncached Promise we have to abandon this attempt\n+ \/\/ but we can still emit anything up until this point.\n+ error = SuspenseException;\n+ debugInfo =\n+ thenable._debugInfo === undefined ? null : thenable._debugInfo;\n+ value = thenable;\n+ }\n+ } else {\n+ value = (actionResult: any);\n+ }\n } else {\n- state = initialState;\n+ value = initialState;\n }\n+\n hookLog.push({\n displayName: null,\n primitive: 'FormState',\n- stackError: new Error(),\n- value: state,\n- debugInfo: null,\n+ stackError: stackError,\n+ value: value,\n+ debugInfo: debugInfo,\n });\n+\n+ if (error !== null) {\n+ throw error;\n+ }\n+\n+ \/\/ value being a Thenable is equivalent to error being not null\n+ \/\/ i.e. we only reach this point with Awaited\n+ const state = ((value: any): Awaited);\n return [state, (payload: P) => {}];\n }\n \ndiff --git a\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/CustomHooks.js b\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/CustomHooks.js\nindex aa3a9a6295..2a845ec12e 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/CustomHooks.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/CustomHooks.js\n@@ -120,18 +120,62 @@ function wrapWithHoc(Component: (props: any, ref: React$Ref) => any) {\n }\n const HocWithHooks = wrapWithHoc(FunctionWithHooks);\n \n+function incrementWithDelay(previousState: number, formData: FormData) {\n+ const incrementDelay = +formData.get('incrementDelay');\n+ const shouldReject = formData.get('shouldReject');\n+ const reason = formData.get('reason');\n+\n+ return new Promise((resolve, reject) => {\n+ setTimeout(() => {\n+ if (shouldReject) {\n+ reject(reason);\n+ } else {\n+ resolve(previousState + 1);\n+ }\n+ }, incrementDelay);\n+ });\n+}\n+\n function Forms() {\n- const [state, formAction] = useFormState((n: number, formData: FormData) => {\n- return n + 1;\n- }, 0);\n+ const [state, formAction] = useFormState(incrementWithDelay, 0);\n return (\n
\n- {state}\n+ State: {state} \n+ \n+ delay:\n+ \n+ <\/label>\n+ \n+ Reject:\n+ \n+ \n+ <\/label>\n

dillon1000/react

Files changed