Manual setup vs hookform-action

// LoginForm.tsx
'use client'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useTransition } from 'react'
import { z } from 'zod'
import { loginAction } from './actions'

// Schema must be re-imported/re-defined
// on the client to feed zodResolver
const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

type Fields = z.infer<typeof schema>

export function LoginForm() {
  const [isPending, startTransition] = useTransition()

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<Fields>({
    resolver: zodResolver(schema),
    defaultValues: { email: '', password: '' },
  })

  const onSubmit = (values: Fields) => {
    startTransition(async () => {
      const result = await loginAction(values)
      // Must manually walk error keys
      if (result?.errors) {
        for (const [field, messages] of
          Object.entries(result.errors)) {
          setError(field as keyof Fields, {
            message: (messages as string[])[0],
          })
        }
      }
    })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      <input {...register('password')} type="password" />
      {errors.password && <p>{errors.password.message}</p>}
      <button disabled={isPending || isSubmitting}>
        {isPending ? 'Signing in…' : 'Sign In'}
      </button>
    </form>
  )
}

// LoginForm.tsx
'use client'
import { useActionForm } from 'hookform-action'
import { loginAction } from './actions'

// No resolver — schema is auto-detected
// from the withZod wrapper on the action

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isPending },
  } = useActionForm(loginAction, {
    defaultValues: { email: '', password: '' },
    // enable real-time validation with
    // the same schema — no extra imports
    validationMode: 'onChange',
  })

  return (
    <form onSubmit={handleSubmit()}>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      <input {...register('password')} type="password" />
      {errors.password && <p>{errors.password.message}</p>}
      <button disabled={isPending}>
        {isPending ? 'Signing in…' : 'Sign In'}
      </button>
    </form>
  )
}