Xử lý form phức tạp trong React: vì sao dùng react-hook-form (kèm Zod)?

const schema = z.object({ email: z.string().email(), age: z.coerce.number().min(18) });
type Form = z.infer<typeof schema>;

const { register, handleSubmit, formState: { errors, isSubmitting } } =
  useForm<Form>({ resolver: zodResolver(schema) });

<form onSubmit={handleSubmit(async (v) => { await save(v); })}>
  <input {...register("email")} />
  {errors.email && <span>{errors.email.message}</span>}
  <button disabled={isSubmitting}>Gửi</button>
</form>

• Ít re-render: chỉ subscribe phần cần dùng (formState, watch, useWatch).
• Controller/useController cho component không expose ref input.
• Dùng chung schema Zod cho client và server để validate hai phía.
• useFieldArray cho danh sách field động.