What is react-hook-form and why is it better than manual controlled forms?

Manual controlled forms re-render on every keystroke for every field. react-hook-form uses uncontrolled inputs and only triggers re-renders on validation state changes.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
});

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({ resolver: zodResolver(schema) });

  const onSubmit = async (data) => {
    await api.login(data); // data is fully typed and validated
  };

  return (
    

      
      {errors.email && 
{errors.email.message}
}

      
      {errors.password && 
{errors.password.message}
}

      Login
    
  );
}

Why it's better:

• Zero re-renders while typing (uncontrolled under the hood)
• Schema-based validation with Zod/Yup integration
• Tiny bundle (9kb), no dependencies
• Works with any UI library (MUI, Chakra, Radix)