What are useFormState and useFormStatus hooks?

'use client'
import { useFormState } from 'react-dom';
import { loginAction } from './actions';

export default function LoginForm() {
const [state, formAction] = useFormState(loginAction, {
  errors: {},
  message: ''
});

return (
  <form action={formAction}>
    <input name="email" type="email" />
    {state.errors.email && <p>{state.errors.email}</p>}
    
    <input name="password" type="password" />
    {state.errors.password && <p>{state.errors.password}</p>}
    
    <button type="submit">Login</button>
    {state.message && <p>{state.message}</p>}
  </form>
);
}

'use client'
import { useFormStatus } from 'react-dom';

function SubmitButton() {
const { pending, data, method, action } = useFormStatus();

return (
  <button type="submit" disabled={pending}>
    {pending ? 'Submitting...' : 'Submit'}
  </button>
);
}

// Must be used in a child component of <form>
export default function MyForm() {
return (
  <form action={serverAction}>
    <input name="email" />
    <SubmitButton />
  </form>
);
}

'use client'
import { useFormState, useFormStatus } from 'react-dom';

function SubmitButton() {
const { pending } = useFormStatus();
return (
  <button disabled={pending}>
    {pending ? '⏳ Saving...' : '💾 Save'}
  </button>
);
}

export default function EditProfile() {
const [state, formAction] = useFormState(updateProfile, null);

return (
  <form action={formAction}>
    <input name="name" defaultValue={user.name} />
    <input name="bio" defaultValue={user.bio} />
    <SubmitButton />
    {state?.success && <p>✅ Profile updated!</p>}
    {state?.error && <p>❌ {state.error}</p>}
  </form>
);
}