Day 17 of 100 Days of Code — Forms With Libraries in React

Today marks Day 17 of my 100 Days of Code journey, and the focus was on something every React developer deals with sooner or later: forms.
If you’ve ever tried to build forms manually in React, you already know how quickly things get repetitive and messy. That’s exactly why today I dove into forms with libraries — and why tools like React Hook Form have become so popular.

In this post, I’ll walk through why forms in React can be painful, the difference between controlled vs. uncontrolled components, and why form libraries drastically improve the developer experience. This is written from my hands-on learning today, but optimized so you get clear, accurate, and practical takeaways.

---

Why Building Forms Manually in React Is Painful

Handling forms in pure React often means writing a lot of boilerplate:

• Managing input values with state
• Creating validation rules for each field
• Displaying error messages
• Handling submission logic
• Making sure everything re-renders correctly

Example of the “traditional” messy way:

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [nameError, setNameError] = useState('');

const validate = () => {
  if (!name) setNameError('Name is required'); // You repeat this for every field
}

This works — but it’s far from efficient, especially as your form grows.

React Hook Form transforms form creation and handling into a seamless and highly efficient experience. It's a game-changer that empowers developers to build exceptional forms with ease.
Following is an example of how you can create a form with validation using React Hook Form:

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("name", { required: "Name is required" })} />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register("email", { required: "Email is required" })} />
      {errors.email && <p>{errors.email.message}</p>}

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

---

How React Handles Forms (Compared to Traditional HTML)

In plain HTML, the DOM itself manages form values.
In React, the developer manages state instead, which leads to two distinct approaches: controlled and uncontrolled components.

🔹 Controlled Components

• The input value is stored in React state.
• Every keystroke triggers an onChange event.
• React becomes the single source of truth.

This gives you great control, but the downside is:
👉 Every input change triggers a re-render, which isn’t always necessary.

🔹 Uncontrolled Components

• The DOM stores the actual input value.
• You use useRef() to read the value only when needed.
• Fewer re-renders, more performance-friendly.

This is where many form libraries shine — especially React Hook Form, which heavily leverages uncontrolled components for performance.

---

Why Use React Hook Form?

After exploring it today, it’s clear why this library is so widely adopted.
Here are the biggest advantages:

✅ 1. Improved Performance

React Hook Form avoids unnecessary re-renders by reading values directly from the DOM, rather than storing everything in React state.
This is especially useful for large, complex forms.

✅ 2. Much Less Boilerplate

Instead of managing state for each field, you 'register` your inputs.
No repetitive setter functions. No sprawling state objects.

✅ 3. Easy Built-In Validation

It aligns closely with native HTML validation:

• required
• minLength
• pattern

You get a clean validation experience without writing your own validation logic from scratch.

✅ 4. Supports Schema Validation (Yup, Zod, Joi)

For more advanced scenarios, React Hook Form integrates seamlessly with schema validators.
This means:

• All validations are defined once
• Centralized, DRY
• Easier maintenance

✅ 5. A Better Developer Experience

With features like:

• Error tracking
• Form resetting
• Watching form values
• Controlled components support

…it becomes incredibly pleasant to work with.

✅ 6. Lightweight & Dependency-Free

The library is very small and has zero external dependencies, helping keep bundle size low.

✅ 7. Works With UI Libraries (Material UI, Ant Design)

Some UI components don’t expose a ref, but React Hook Form handles this gracefully through its Controller component.
This allows smooth integration with component libraries.

✅ 8. Accessibility (a11y) Support

Built-in helpers and ARIA support make it easier to create forms that are accessible by default.

---

Final Thoughts

Today’s deep dive highlighted how form libraries can significantly enhance both performance and developer satisfaction. While manually handling forms in React is possible, it often becomes repetitive and prone to errors. React Hook Form streamlines the entire process, making it cleaner, faster, and much more scalable.

If you're working on anything more than simple forms, it's highly beneficial to explore using a form library — your future self will appreciate it!.

Happy coding!