📘 Day 38 — Forms Advanced: React Hook Form & Formik Deep Dive

Managing forms efficiently is key to smooth user experience. In advanced React apps, libraries like React Hook Form and Formik make form management easier, faster, and more scalable.

🔹 Why Use Form Libraries?

• Reduces boilerplate code.
• Improves performance by minimizing re-renders.
• Provides built-in validation and error handling.
• Integrates easily with UI libraries like MUI or Bootstrap.

⚡ Example with React Hook Form

import React from "react";
import { useForm } from "react-hook-form";

export default function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: true })} placeholder="Username" />
      {errors.username && <span>Username is required</span>}

      <input type="email" {...register("email", { required: true })} placeholder="Email" />
      {errors.email && <span>Email is required</span>}

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

💡 Using Formik

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";

export default function LoginForm() {
  return (
    <Formik
      initialValues={{ email: "", password: "" }}
      validate={(values) => {
        const errors = {};
        if (!values.email) errors.email = "Required";
        return errors;
      }}
      onSubmit={(values) => console.log(values)}
    >
      {() => (
        <Form>
          <Field name="email" type="email" placeholder="Email" />
          <ErrorMessage name="email" />
          <Field name="password" type="password" placeholder="Password" />
          <button type="submit">Login</button>
        </Form>
      )}
    </Formik>
  );
}
  

Both libraries simplify complex form logic and validation, making your apps more maintainable and efficient.

← Prev Next →