React Hook Form vs Formik – 2024 Comparision

The Forms are the fundamental part of web development which allows the users to engage the added data on websites. React is a popular library for building user interfaces that provide various tools and libraries to developers to handle forms easily. Here, we discuss two globally used libraries to manage forms in React i.e., React Hook Form and Formik.

What is React Hook Form?

React Hook From is one of the famous libraries for React applications. It is lightweight and built for simple and easy projects due to its easy management, and simplicity to manage form state and behavior. It forms a unidirectional data flow to easily integrate the react components.

What is Formik?

Formik is also the library for the react application but it is more established for handling forms. It also provides a set of React components to manage the different forms which make it useful for work in complex and larger projects. It is designed with different features like state validation, state management, and form submission.

Installation and Set up of React Hook Form

Getting started with the React Hook Form is a straightforward process. Begin by installing the library using npm:

bash

npm install react-hook-form

Once installed, you can import the required components and hooks into your React component and start using them.

Installation and Set up of Formik

To use Formik, you need to install it via npm:

bash

npm install formik

After installation, you can import the necessary components and hooks into your React component. Formik also requires the Yup library for validation, which you can install separately:

bash

npm install yup

API and Usage of React Hook Form

React Hook Form provides a simple API and provides different functionality like “useForm”. It is used to initialize and gain access to its methods and state. Here’s a basic example of using React Hook Form:

jsx

import React from 'react';

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

function MyForm() {

  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {

    console.log(data);

  };

  return (

    <form onSubmit={handleSubmit(onSubmit)}>

      <Controller

        name="example"

        control={control}

        defaultValue=""

        render={({ field }) => <input {...field} />}

      />

      <button type="submit">Submit</button>

    </form>

  );

}

API and Usage of Formik

Formik also provides the “useFormik” to provide different functionalities. It is generally used to initialize the form and also provide a bag of helpers for managing the state.

Let’s understand by the following example: 

jsx

import React from 'react';

import { useFormik } from 'formik';

function MyForm() {

  const formik = useFormik({

    initialValues: {

      example: '',

    },

    onSubmit: (values) => {

      console.log(values);

    },

  });

  return (

    <form onSubmit={formik.handleSubmit}>

      <input

        id="example"

        name="example"

        type="text"

        onChange={formik.handleChange}

        value={formik.values.example}

      />

      <button type="submit">Submit</button>

    </form>

  );

}

Validation of React Hook Form and Formik

Validation of React Hook Form

React Hook Form generally provides different built-in support for client-side validation. Generally, the “yup” library of react is used for validation.

Let’s understand this by example: 

JSX

import * as Yup from 'yup';

const schema = Yup.object().shape({

  example: Yup.string().required('This field is required'),

});

// In the component

const { control, handleSubmit } = useForm({

  resolver: yupResolver(schema),

});

Validation of Formik

Formik also uses the “yup” library for validation and working in the same manner.

Let’s understand this by example : 

JSX

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({

  example: Yup.string().required('This field is required'),

});

// In the component

const formik = useFormik({

  initialValues: {

    example: '',

  },

  validationSchema,

  onSubmit: (values) => {

    console.log(values);

  },

});

Development of React Hook Form and Formik

Development of React Hook Form and Formik follow different philosophies depending on the complexity of the projects. React Hook form takes care of minimalism and performance of every task which makes it suitable for smaller projects where performance is critical. On the other hand, Formik provides a more complex set of features, greater complexity, and a different set of applications which make it suitable for complex or larger projects.

Sample Code of React Hook Form and Formik

Here’s a side-by-side comparison of a simple form implemented with both React Hook Form and Formik:-

React Hook Form Sample Code:

JSX

import React from 'react';

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

function MyForm() {

  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {

    console.log(data);

  };

  return (

    <form onSubmit={handleSubmit(onSubmit)}>

      <Controller

        name="example"

        control={control}

        defaultValue=""

        render={({ field }) => <input {...field} />}

      />

      <button type="submit">Submit</button>

    </form>

  );

}

Formik Sample Code:

JSX

import React from 'react';

import { useFormik } from 'formik';

function MyForm() {

  const formik = useFormik({

    initialValues: {

      example: '',

    },

    onSubmit: (values) => {

      console.log(values);

    },

  });

  return (

    <form onSubmit={formik.handleSubmit}>

      <input

        id="example"

        name="example"

        type="text"

        onChange={formik.handleChange}

        value={formik.values.example}

      />

      <button type="submit">Submit</button>

    </form>

  );

}

Conclusion

In conclusion, React hook form is suitable for smaller projects due to its lightweight option, while Formik is suitable for large and complex projects due to its feature-rich experience. But both of them are powerful tools for handling react applications and selection between them is dependent on the integration into the projects.

FAQs