React Hook Form vs Formik: Which Should You Use?

React Hook Form vs Formik is a question of architecture. React Hook Form keeps fields uncontrolled and reads values from the DOM, so only the changed field re-renders. Formik keeps every value in React state, which re-renders the whole form on each keystroke.

Both validate and both handle submission, but they trade re-renders for a different mental model. The examples below build the same login form in each library so the difference is concrete.

The core difference at a glance

The table is the decision. If you want the fewest re-renders, React Hook Form wins by design. If you want every value mirrored in state where other code can read it live, Formik's model is closer to plain React.

React Hook Form in a few lines

React Hook Form registers each field by name and collects the values on submit. The input stays uncontrolled, so typing does not trigger a render.

App.jsx

import { useForm } from "react-hook-form";
 
export default function RHFLogin() {
  const { register, handleSubmit, formState: { errors } } = useForm();
 
  function onSubmit(data) {
    alert(JSON.stringify(data));
  }
  // the return below continues this same component

The register call attaches the email field and the required rule, then the return block renders the form and its error message.

App.jsx

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" {...register("email", { required: true })} />
      {errors.email && <p role="alert">Email is required.</p>}
      <button type="submit">Log in</button>
    </form>
  );
}

The register call returns the ref and change handlers for the input. Validation runs on submit, and the errors object updates without re-rendering unrelated fields. For the full setup and schema integration, see the React Hook Form tutorial.

Formik in a few lines

Formik tracks values in state and exposes them through a formik object. Every keystroke calls its handleChange handler and re-renders the form.

App.jsx

import { useFormik } from "formik";
export default function FormikLogin() {
  const formik = useFormik({
    initialValues: { email: "" },
    onSubmit: (values) => alert(JSON.stringify(values)),
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" value={formik.values.email} onChange={formik.handleChange} />
      <button type="submit">Log in</button>
    </form>
  );
}

The value prop comes from formik.values.email, so the field is controlled and any part of the component can read the latest email at any time. Formik also ships components such as Field and ErrorMessage, but the underlying model stays controlled.

Validation and dependencies

Both libraries validate, but they wire it differently. React Hook Form prefers built-in rules or a resolver, while Formik prefers a validate function or a Yup validationSchema.

• React Hook Form has zero runtime dependencies and ships frequent 7.x releases.
• Formik depends on lodash and deepmerge, and its 2.4.x releases come slowly.
• Both accept schema libraries, so validation power is a tie.

The dependency difference matters for bundle size and supply chain surface, while the release cadence matters for how fast a library adopts new React behavior. Both also hand you the same final result: a data object on submit and per-field error messages, so the learning curve is similar even though the internals differ.

Which should you use?

Start with React Hook Form for most new projects. Its uncontrolled model means faster forms with less code, and it is the more actively maintained choice.

• Choose React Hook Form for new forms, large forms, and performance-sensitive lists.
• Choose Formik when you want values in state for live side effects, or when a codebase already uses it.
• Choose plain state when the form is small and a library adds nothing.

A common false equivalence is treating both as interchangeable wrappers around the same thing. They are not. The uncontrolled versus controlled split changes when re-renders happen and where values live, so the choice shapes every field you write.

For the plain React version of either model, see how to build forms in React, and for hand-written checks see React form validation without a library.