cf.completefrontend

Predict the outputMedium

Both components call useFormStatus. Which one sees the form as pending when you press Save?

App renders the form and calls useFormStatus. So does SaveButton, which is rendered inside the form. The action waits 20 ms, as a request would.

What does it log, and what does the page show?
import { useFormStatus } from "react-dom";
 
function SaveButton() {
  const { pending } = useFormStatus();
  console.log("SaveButton pending:", pending);
  return <button disabled={pending}>{pending ? "Saving…" : "Save"}</button>;
}
 
async function save(formData) {
  await new Promise((resolve) => setTimeout(resolve, 20));
  console.log("saved", formData.get("tea"));
}
 
export default function App() {
  const { pending } = useFormStatus();
  console.log("App pending:", pending);
  return (
    <form action={save}>
      <input name="tea" defaultValue="Sencha" aria-label="Tea" />
      <SaveButton />
      <p>{pending ? "Sending the form…" : "Ready"}</p>
    </form>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click Save, and wait for the action to finish.

Practice it in the editor, with tests

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…