Install and import useForm, connect input through register, handleSubmit to process submission, formState get errors; 2. Add required, pattern and other rules to register to achieve built-in or customized verification; 3. Use useFieldArray to manage dynamic input arrays and support adding and deleting fields; 4. Integrate controlled components of UI libraries such as MUI and Ant Design through Controller; 5. Use watch, touchedFields, etc. to achieve real-time feedback and user experience optimization, and finally build an efficient and maintainable form.

When building interactive forms in React, managing state, validation, and user input efficiently can quickly become complex. That's where React Hook Form shines. It simplifies form handling by minimizing re-renders, leveraging uncontrolled components, and offering a clean, independent API. Here's how to build interactive forms effectively using React Hook Form.

1. Setting Up React Hook Form

Start by installing the library:

 npm install react-hook-form

Then, import useForm in your component. This custom hook provides everything you need: register inputs, handle submission, and manage errors.

 import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  Return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      {errors.firstName && <p>First name is required</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

The register function connects your inputs to the form state. No need to write onChange , value , or onBlur manually.

2. Adding Validation Rules

React Hook Form supports both built-in and custom validation. You can define rules directly in register .

 <input
  {...register("email", {
    required: "Email is required",
    pattern: {
      value: /^[a-z0-9._% ] @[a-z0-9.] \.[az]{2,}$/,
      message: "Invalid email address"
    }
  })}
  placeholder="Email"
/>
{errors.email && <p>{errors.email.message}</p>}

Common validation options:

• required : Ensures the field isn't empty
• minLength / maxLength : For string length
• min / max : For numbers
• validate : For custom logic (eg, checking password strength)

 password: {
  required: "Password is required",
  minLength: {
    value: 6,
    message: "Password must be at least 6 characters"
  },
  validate: (value) => value !== "password123" || "Too common password"
}

3. Handling Dynamic Inputs and Arrays

For dynamic fields (like adding multiple hobbies), use useFieldArray . It's perfect for managing lists of inputs.

 import { useFieldArray } from 'react-hook-form';

function HobbyForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: { hobbies: [""] }
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "hobbies"
  });

  Return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`hobbies.${index}`)}
            placeholder="Hobby"
          />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append("")}>Add Hobby</button>
      <button type="submit">Submit</button>
    </form>
  );
}

This keeps your form scalable and user-friendly.

4. Integrating with UI Libraries and Components

React Hook Form works seamlessly with controlled components like MUI, Ant Design, or React Select. Use the Controller or useController wrapper.

 import { Controller } from 'react-hook-form';

<Controller
  name="color"
  control={control}
  render={({ field }) => (
    <select {...field}>
      <option value="red">Red</option>
      <option value="blue">Blue</option>
    </select>
  )}
/>

This gives you full control while keeping validation and form state synchronized.

5. Real-Time Feedback and UX Improvements

Enhance user experience with real-time validation and error messages.

• Show errors only after user interaction using touchedFields or dirtyFields .
• Use watch() to observe field values and update UI dynamically (eg, live character count, conditional fields).

 const watchPassword = watch("password");

useEffect(() => {
  if (watchPassword) {
    // Update password strength bar
  }
}, [watchPassword]);

You can also debounce input for search fields or auto-save logic.

React Hook Form keeps your forms performant and maintainable. With minimum boilerplate, solid validation, and great TypeScript support, it's a go-to choice for modern React applications.

Basically, register inputs, define rules, handle submission, and enhance UX — all in a clean, readable way.

The above is the detailed content of Building Interactive Forms with React Hook Form. For more information, please follow other related articles on the PHP Chinese website!