🧰 Form Libraries: Formik, React Hook Form, Yup

Managing complex forms in React becomes easier with libraries like Formik, React Hook Form, and Yup for validation. Here's an overview of each.

📦 1. Formik

Formik simplifies form state, validation, and submission. It integrates well with Yup for schema-based validation.

import { Formik, Form, Field, ErrorMessage } from 'formik';

<Formik
  initialValues={{ email: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <Field name="email" type="email" />
    <ErrorMessage name="email" />
    <button type="submit">Submit</button>
  </Form>
</Formik>
  

🎣 2. React Hook Form (RHF)

A lightweight and performant form library that uses React hooks. Very fast and requires minimal re-renders.

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

const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("email")} />
  <button type="submit">Submit</button>
</form>
  

✅ 3. Yup (Validation)

Yup is a JavaScript schema builder for validating values. Commonly used with Formik or RHF.

import * as Yup from 'yup';

const schema = Yup.object({
  email: Yup.string().email().required(),
});
  

🤔 When to Use What?

• Formik: Beginner-friendly, good for complex forms
• React Hook Form: Best performance, lightweight
• Yup: Use it for schema-based validations

All of these tools enhance productivity and make your forms clean, reliable, and scalable.