React: What are useFormStatus and useFormState?

1import { useFormStatus } from 'react-dom';
2
3function SubmitButton() {
4    const { pending, data, method, action } = useFormStatus();
5    
6    return (
7        <button type="submit" disabled={pending}>
8            {pending ? 'Sending...' : 'Submit'}
9        </button>
10    );
11}
12
13function MyForm() {
14    return (
15        <form action={createOrder}>
16            <input name="email" />
17            <SubmitButton />  {/* Knows the status of the parent form! */}
18        </form>
19    );
20}

1import { useFormState } from 'react-dom';
2
3function MyForm() {
4    const [state, formAction] = useFormState(createOrder, { status: 'idle' });
5    
6    return (
7        <form action={formAction}>
8            {state.status === 'success' && <p>Order created!</p>}
9            {state.status === 'error' && <p>Error: {state.message}</p>}
10            <input name="email" />
11            <button type="submit">Submit</button>
12        </form>
13    );
14}