{"files":[{"path":"fixtures\/flight\/src\/Button.js","status":"M"},{"path":"fixtures\/flight\/src\/Form.js","status":"M"}],"patch":"diff --git a\/fixtures\/flight\/src\/Button.js b\/fixtures\/flight\/src\/Button.js\nindex d4a3f8500e..7e43bc2b16 100644\n--- a\/fixtures\/flight\/src\/Button.js\n+++ b\/fixtures\/flight\/src\/Button.js\n@@ -1,29 +1,30 @@\n 'use client';\n \n import * as React from 'react';\n-import {flushSync} from 'react-dom';\n+import {experimental_useFormStatus as useFormStatus} from 'react-dom';\n import ErrorBoundary from '.\/ErrorBoundary.js';\n \n-export default function Button({action, children}) {\n- const [isPending, setIsPending] = React.useState(false);\n+function ButtonDisabledWhilePending({action, children}) {\n+ const {pending} = useFormStatus();\n+ return (\n+ {\n+ const result = await action();\n+ console.log(result);\n+ }}>\n+ {children}\n+ <\/button>\n+ );\n+}\n \n+export default function Button({action, children}) {\n return (\n \n

\n- {\n- \/\/ TODO: Migrate to useFormPending once that exists\n- flushSync(() => setIsPending(true));\n- try {\n- const result = await action();\n- console.log(result);\n- } finally {\n- React.startTransition(() => setIsPending(false));\n- }\n- }}>\n+ \n {children}\n- <\/button>\n+ <\/ButtonDisabledWhilePending>\n <\/form>\n <\/ErrorBoundary>\n );\ndiff --git a\/fixtures\/flight\/src\/Form.js b\/fixtures\/flight\/src\/Form.js\nindex a4b92366d4..c166f5a16b 100644\n--- a\/fixtures\/flight\/src\/Form.js\n+++ b\/fixtures\/flight\/src\/Form.js\n@@ -1,9 +1,14 @@\n 'use client';\n \n import * as React from 'react';\n-import {flushSync} from 'react-dom';\n+import {experimental_useFormStatus as useFormStatus} from 'react-dom';\n import ErrorBoundary from '.\/ErrorBoundary.js';\n \n+function Status() {\n+ const {pending} = useFormStatus();\n+ return pending ? 'Saving...' : null;\n+}\n+\n export default function Form({action, children}) {\n const [isPending, setIsPending] = React.useState(false);\n \n@@ -11,14 +16,8 @@ export default function Form({action, children}) {\n \n {\n- \/\/ TODO: Migrate to useFormPending once that exists\n- flushSync(() => setIsPending(true));\n- try {\n- const result = await action(formData);\n- alert(result);\n- } finally {\n- React.startTransition(() => setIsPending(false));\n- }\n+ const result = await action(formData);\n+ alert(result);\n }}>\n \n Name: \n@@ -27,7 +26,7 @@ export default function Form({action, children}) {\n File: \n <\/label>\n

dillon1000/react

Files changed