chore(react-server): set form input defaultValue

examples/react-server/e2e/basic.test.ts

@@ -28,7 +28,7 @@ test("client hmr @dev", async ({ page }) => {
   await using _ = await createReloadChecker(page);
 
   await page.getByRole("heading", { name: "Hello Client Component" }).click();
-  await editor.edit((s) =>
+  editor.edit((s) =>
     s.replace("Hello Client Component", "Hello [EDIT] Client Component"),
   );
   await page
@@ -68,14 +68,14 @@ test("shared hmr @dev", async ({ page }) => {
   await page.getByText("Shared [EDIT] Component (client)").click();
 });
 
-test("server-action @js", async ({ page }) => {
+test("server action @js", async ({ page }) => {
   usePageErrorChecker(page);
   await page.goto("/");
   await waitForHydration(page);
   await testServerAction(page);
 });
 
-testNoJs("server-action @nojs", async ({ page }) => {
+testNoJs("server action @nojs", async ({ page }) => {
   usePageErrorChecker(page);
   await page.goto("/");
   await testServerAction(page);
@@ -115,9 +115,7 @@ async function testUseActionState(page: Page, options: { js: boolean }) {
     await expect(page.getByTestId("action-state")).toHaveText("...");
   }
   await page.getByText("Wrong! (tried once)").click();
-  await expect(page.getByPlaceholder("Answer?")).toHaveValue(
-    options.js ? "3" : "",
-  );
+  await expect(page.getByPlaceholder("Answer?")).toHaveValue("3");
   await page.getByPlaceholder("Answer?").fill("2");
   await page.getByPlaceholder("Answer?").press("Enter");
   await page.getByText("Correct! (tried 2 times)").click();

examples/react-server/src/__snapshots__/basic.test.tsx.snap

@@ -57,7 +57,9 @@ exports[`basic 1`] = `
             +1
           </button>
         </form>
-        <form>
+        <form
+          action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+        >
           <h4>
             Hello useActionState
           </h4>

examples/react-server/src/routes/_action.tsx

@@ -14,6 +14,7 @@ export function changeCounter(formData: FormData) {
 
 type CheckAnswerState = {
   message: string;
+  answer?: number;
   count: number;
 };
 
@@ -24,5 +25,5 @@ export async function checkAnswer(
   await sleep(500);
   const answer = Number(formData.get("answer"));
   const message = answer === 2 ? "Correct!" : "Wrong!";
-  return { message, count: (prev?.count ?? 0) + 1 };
+  return { message, answer, count: (prev?.count ?? 0) + 1 };
 }

examples/react-server/src/routes/_client.tsx

@@ -57,14 +57,15 @@ export function UseActionStateDemo() {
   const [data, formAction, isPending] = React.useActionState(checkAnswer, null);
 
   return (
-    <form {...useNoRequestFormReset(formAction)}>
+    <form action={formAction}>
       <h4>Hello useActionState</h4>
       <div style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
         <div>1 + 1 = </div>
         <input
           className="client-input"
           name="answer"
           placeholder="Answer?"
+          defaultValue={data?.answer}
           required
         />
         <div data-testid="action-state">
@@ -81,23 +82,3 @@ export function UseActionStateDemo() {
     </form>
   );
 }
-
-// https://github.com/facebook/react/pull/28809
-function useNoRequestFormReset(
-  action: React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS["functions"],
-): Pick<JSX.IntrinsicElements["form"], "action" | "onSubmit"> {
-  const hydrated = React.useSyncExternalStore(
-    React.useCallback(() => () => {}, []),
-    () => true,
-    () => false,
-  );
-  if (hydrated) {
-    return {
-      onSubmit(e) {
-        e.preventDefault();
-        action(new FormData(e.currentTarget));
-      },
-    };
-  }
-  return { action };
-}