Add useFormStatus to Flight fixture (#26773)
Andrew Clark committed
May 3, 2023 at 15:29 UTC
f533cee8cb4fb54c170230741eea7902cb41ee06
2 files changed
+26
-26
fixtures/flight/src/Button.js
+17
-16
@@ -1,29 +1,30 @@
1
'use client';
2
3
import * as React from 'react';
4
-import {flushSync} from 'react-dom';
4
+import {experimental_useFormStatus as useFormStatus} from 'react-dom';
5
import ErrorBoundary from './ErrorBoundary.js';
6
7
-export default function Button({action, children}) {
8
- const [isPending, setIsPending] = React.useState(false);
7
+function ButtonDisabledWhilePending({action, children}) {
8
+ const {pending} = useFormStatus();
9
+ return (
10
+ <button
11
+ disabled={pending}
12
+ formAction={async () => {
13
+ const result = await action();
14
+ console.log(result);
15
+ }}>
16
+ {children}
17
+ </button>
18
+ );
19
+}
20
21
+export default function Button({action, children}) {
22
return (
23
<ErrorBoundary>
24
<form>
13
- <button
14
- disabled={isPending}
15
- formAction={async () => {
16
- // TODO: Migrate to useFormPending once that exists
17
- flushSync(() => setIsPending(true));
18
- try {
19
- const result = await action();
20
- console.log(result);
21
- } finally {
22
- React.startTransition(() => setIsPending(false));
23
- }
24
- }}>
25
+ <ButtonDisabledWhilePending action={action}>
26
{children}
26
- </button>
27
+ </ButtonDisabledWhilePending>
28
</form>
29
</ErrorBoundary>
30
);
fixtures/flight/src/Form.js
+9
-10
@@ -1,9 +1,14 @@
1
'use client';
2
3
import * as React from 'react';
4
-import {flushSync} from 'react-dom';
4
+import {experimental_useFormStatus as useFormStatus} from 'react-dom';
5
import ErrorBoundary from './ErrorBoundary.js';
6
7
+function Status() {
8
+ const {pending} = useFormStatus();
9
+ return pending ? 'Saving...' : null;
10
+}
11
+
12
export default function Form({action, children}) {
13
const [isPending, setIsPending] = React.useState(false);
14
@@ -11,14 +16,8 @@ export default function Form({action, children}) {
16
<ErrorBoundary>
17
<form
18
action={async formData => {
14
- // TODO: Migrate to useFormPending once that exists
15
- flushSync(() => setIsPending(true));
16
- try {
17
- const result = await action(formData);
18
- alert(result);
19
- } finally {
20
- React.startTransition(() => setIsPending(false));
21
- }
19
+ const result = await action(formData);
20
+ alert(result);
21
}}>
22
<label>
23
Name: <input name="name" />
@@ -27,7 +26,7 @@ export default function Form({action, children}) {
26
File: <input type="file" name="file" />
27
</label>
28
<button>Say Hi</button>
30
- {isPending ? 'Saving...' : null}
29
+ <Status />
30
</form>
31
</ErrorBoundary>
32
);