Migration: Manual Wiring -> hookform-action
Before/after comparison that makes DX gains obvious for maintainers.
Impact
Muito alto
Differential
Concrete reduction in boilerplate and failure points.
Message
Less glue code is the easiest adoption argument.
Before (manual wiring)
const form = useForm<LoginValues>();
const [isPending, startTransition] = useTransition();
const onSubmit = form.handleSubmit(async (values) => {
const parsed = schema.safeParse(values);
if (!parsed.success) {
mapZodToSetError(parsed.error.flatten().fieldErrors, form.setError);
return;
}
startTransition(async () => {
const result = await loginAction(parsed.data);
mapApiErrorsToSetError(result, form.setError);
});
});After (hookform-action)
const form = useActionForm(loginAction, {
defaultValues: { email: "", password: "" },
validationMode: "onChange",
});
return (
<form onSubmit={form.handleSubmit()}>
<input {...form.register("email")} />
<input type="password" {...form.register("password")} />
<button disabled={form.formState.isPending}>Sign In</button>
</form>
);