Submit forms with action and useActionState

Another feature in React 19 is a new API for action inside <form> elements.

The action property of a <form> element allows to execute an action without the need to access the submit event directly and call event.preventDefault().

It can be used in combination with useActionState to execute a function on submit. We implement this in a new Form.tsx client component:

src/components/Form.tsx
"use client";

import { useActionState } from "react";

export default function Form() {
  const [_, action] = useActionState(() => { /* ... */ }, null);
  return (
    <form action={action}>
      <input type="text" name="username" />
      <button>Submit</button>
    </form>
  );
}

Inside the first parameter of useActionState we execute a client effect with RuntimeClient:

export default function Form() {
  const [_, action] = useActionState(
    () =>
      RuntimeClient.runPromise(
        /// TODO
      ),
    null
  );
  return (
    <form action={action}>
      <input type="text" name="username" />
      <button>Submit</button>
    </form>
  );
}