Devtools Debug Submission History

Instrument forms in development with a floating panel for state + history.

Impact

Medio

Differential

Faster diagnosis of validation and async submission regressions.

Message

Debug guiado por dados, nao por tentativa e erro.

import { useActionForm } from "hookform-action";
import { FormDevTool } from "hookform-action-devtools";

function App() {
  const form = useActionForm(loginAction, {
    defaultValues: { email: "", password: "" },
  });

  return (
    <>
      <form onSubmit={form.handleSubmit()}>
        <input {...form.register("email")} />
        <input type="password" {...form.register("password")} />
      </form>
      {process.env.NODE_ENV === "development" && (
        <FormDevTool control={form.control} defaultOpen />
      )}
    </>
  );
}

Strategic point: teams adopt faster when debugging behavior is visible and repeatable.