diff --git a/fixtures/flight/src/Button.js b/fixtures/flight/src/Button.js
index d4a3f8500e..7e43bc2b16 100644
--- a/fixtures/flight/src/Button.js
+++ b/fixtures/flight/src/Button.js
@@ -1,29 +1,30 @@
'use client';
import * as React from 'react';
-import {flushSync} from 'react-dom';
+import {experimental_useFormStatus as useFormStatus} from 'react-dom';
import ErrorBoundary from './ErrorBoundary.js';
-export default function Button({action, children}) {
- const [isPending, setIsPending] = React.useState(false);
+function ButtonDisabledWhilePending({action, children}) {
+ const {pending} = useFormStatus();
+ return (
+
+ );
+}
+export default function Button({action, children}) {
return (
);
diff --git a/fixtures/flight/src/Form.js b/fixtures/flight/src/Form.js
index a4b92366d4..c166f5a16b 100644
--- a/fixtures/flight/src/Form.js
+++ b/fixtures/flight/src/Form.js
@@ -1,9 +1,14 @@
'use client';
import * as React from 'react';
-import {flushSync} from 'react-dom';
+import {experimental_useFormStatus as useFormStatus} from 'react-dom';
import ErrorBoundary from './ErrorBoundary.js';
+function Status() {
+ const {pending} = useFormStatus();
+ return pending ? 'Saving...' : null;
+}
+
export default function Form({action, children}) {
const [isPending, setIsPending] = React.useState(false);
@@ -11,14 +16,8 @@ export default function Form({action, children}) {
);