Self-Hosted JavaScript Form Libraries: React Hook Form vs Formik vs TanStack Form vs React Final Form

Introduction

Forms are the primary way users interact with web applications — from login screens to multi-step checkout flows. In the React ecosystem, managing form state efficiently is a solved problem with several mature libraries, each offering different trade-offs between performance, bundle size, and developer experience.

This guide compares four leading React form libraries: React Hook Form (44,784 ⭐), Formik (34,333 ⭐), TanStack Form (6,596 ⭐), and React Final Form (7,444 ⭐). We also cover VeeValidate (11,262 ⭐) for Vue developers.

Quick Comparison

Feature	React Hook Form	Formik	TanStack Form	React Final Form
Stars	44,784 ⭐	34,333 ⭐	6,596 ⭐	7,444 ⭐
Renders	Minimal (uncontrolled)	All on every keystroke	Selective (signals-based)	Subscription-based
Bundle Size	9.5 KB gzipped	12.6 KB gzipped	8.1 KB gzipped	6.5 KB gzipped
TypeScript	✅ First-class	✅ Good	✅ Excellent (generics)	✅ Good
Validation	Built-in + Zod/Yup	Yup (built-in)	Built-in + Zod	Built-in + custom
Native HTML	✅ Yes	❌ Custom components	✅ Yes	❌ Custom render props
Multi-step/Wizard	✅ useFormContext	⚠️ Manual	✅ Built-in	✅ 🏁 Wizard
Last Updated	2026-07	2025-11	2026-07	2026-05

React Hook Form: Performance First

React Hook Form is the most popular form library for React. Its key innovation is using uncontrolled components — form values live in the DOM, not React state — which eliminates re-renders on every keystroke.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8).max(100),
  age: z.number().min(18).max(120),
  country: z.enum(["US", "CA", "UK", "AU"]),
});

export default function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    watch,
  } = useForm({ resolver: zodResolver(schema) });

  const watchCountry = watch("country");

  const onSubmit = async (data) => {
    await fetch("/api/signup", {
      method: "POST",
      body: JSON.stringify(data),
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}

      <input {...register("password")} type="password" />
      {errors.password && <span>{errors.password.message}</span>}

      <input {...register("age", { valueAsNumber: true })} />
      {errors.age && <span>{errors.age.message}</span>}

      <select {...register("country")}>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
      </select>

      {watchCountry === "US" && (
        <input {...register("state")} placeholder="State" />
      )}

      <button type="submit" disabled={isSubmitting}>
        Sign Up
      </button>
    </form>
  );
}

React Hook Form’s uncontrolled approach means a form with 50 fields renders only once on mount, not 50 times while typing. The watch API subscribes to individual fields for conditional rendering without triggering full-form updates. Integration with Zod, Yup, Joi, and other schema validators is seamless via resolver adapters.

Formik: The Veteran

Formik pioneered React form management and remains widely used. It uses controlled components (values stored in React state), which triggers re-renders on every change but provides maximum predictability.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const SignupSchema = Yup.object().shape({
  email: Yup.string().email("Invalid email").required("Required"),
  password: Yup.string()
    .min(8, "Too short")
    .matches(/[A-Z]/, "Need uppercase")
    .required("Required"),
});

export default function SignupForm() {
  return (
    <Formik
      initialValues={{ email: "", password: "", newsletter: false }}
      validationSchema={SignupSchema}
      onSubmit={async (values, { setSubmitting }) => {
        await api.signup(values);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting, values }) => (
        <Form>
          <Field name="email" type="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />

          <Field name="password" type="password" />
          <ErrorMessage name="password" component="div" />

          <Field name="newsletter" type="checkbox" />

          {values.newsletter && (
            <Field name="emailFrequency" as="select">
              <option value="daily">Daily</option>
              <option value="weekly">Weekly</option>
            </Field>
          )}

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

Formik’s render-prop pattern ({({ values }) => (...)}) is verbose compared to hook-based APIs, but it explicitly shows what’s available and when. It’s often chosen for complex forms where the controlled-component model simplifies debugging — you can inspect values at any point.

TanStack Form: The Type-Safe Newcomer

TanStack Form is the newest entrant, from the same team behind React Query and TanStack Table. It prioritizes TypeScript ergonomics and headless architecture, following the TanStack philosophy of framework-agnostic primitives.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { useForm } from "@tanstack/react-form";
import { zodValidator } from "@tanstack/zod-form-adapter";
import { z } from "zod";

export default function CheckoutForm() {
  const form = useForm({
    defaultValues: {
      shipping: { name: "", address: "", zip: "" },
      items: [] as { productId: string; qty: number }[],
    },
    onSubmit: async ({ value }) => {
      await api.checkout(value);
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
    >
      <form.Field
        name="shipping.name"
        validators={{
          onChange: z.string().min(2),
        }}
      >
        {(field) => (
          <>
            <input
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
            />
            {field.state.meta.errors.map((e) => (
              <span key={e}>{e}</span>
            ))}
          </>
        )}
      </form.Field>

      <form.Field name="items" mode="array">
        {(field) => (
          <div>
            {field.state.value.map((item, i) => (
              <div key={i}>
                <form.Field name={`items[${i}].productId`}>
                  {(subField) => (
                    <input
                      value={subField.state.value}
                      onChange={(e) => subField.handleChange(e.target.value)}
                    />
                  )}
                </form.Field>
              </div>
            ))}
            <button
              onClick={() =>
                field.pushValue({ productId: "", qty: 1 })
              }
            >
              Add Item
            </button>
          </div>
        )}
      </form.Field>

      <form.Subscribe selector={(state) => state.isSubmitting}>
        {(isSubmitting) => (
          <button type="submit" disabled={isSubmitting}>
            Checkout
          </button>
        )}
      </form.Subscribe>
    </form>
  );
}

TanStack Form’s field-level subscription model is its standout feature — each form.Field subscribes independently, so typing in one field doesn’t re-render others. The TypeScript integration is the best in class: field.state.value is fully typed through the entire nested object path, eliminating any-typed form values. Array fields are a first-class feature with pushValue, removeValue, and moveValue methods.

React Final Form: Subscription-Based

React Final Form is built on the Final Form state engine, offering granular subscription-based rendering. It’s lightweight and framework-agnostic, with the core final-form package usable outside React.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import { Form, Field } from "react-final-form";

const required = (value) => (value ? undefined : "Required");
const mustBeNumber = (value) =>
  isNaN(value) ? "Must be a number" : undefined;
const composeValidators =
  (...validators) =>
  (value) =>
    validators.reduce(
      (error, validator) => error || validator(value),
      undefined
    );

export default function OrderForm() {
  const onSubmit = async (values) => {
    await api.placeOrder(values);
  };

  return (
    <Form
      onSubmit={onSubmit}
      subscription={{ submitting: true, pristine: true }}
      render={({ handleSubmit, submitting, pristine }) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="product"
            validate={required}
            subscription={{ value: true, error: true, touched: true }}
          >
            {({ input, meta }) => (
              <div>
                <input {...input} placeholder="Product name" />
                {meta.touched && meta.error && <span>{meta.error}</span>}
              </div>
            )}
          </Field>

          <Field
            name="quantity"
            validate={composeValidators(required, mustBeNumber)}
            subscription={{ value: true, error: true, touched: true }}
          >
            {({ input, meta }) => (
              <div>
                <input {...input} type="number" placeholder="Qty" />
                {meta.touched && meta.error && <span>{meta.error}</span>}
              </div>
            )}
          </Field>

          <button type="submit" disabled={submitting || pristine}>
            Place Order
          </button>
        </form>
      )}
    />
  );
}

React Final Form’s explicit subscription prop gives you fine-grained control over which state changes trigger re-renders. The pristine and dirty tracking from Final Form’s state engine is more sophisticated than most alternatives, tracking original vs current values per field.

VeeValidate: For Vue Developers

If your stack uses Vue instead of React, VeeValidate (11,262 ⭐) is the leading form validation library with a similar hook-based API:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" type="email" v-slot="{ field, errors }">
      <input v-bind="field" placeholder="Email" />
      <span>{{ errors[0] }}</span>
    </Field>

    <Field name="password" type="password" v-slot="{ field, errors }">
      <input v-bind="field" placeholder="Password" />
      <span>{{ errors[0] }}</span>
    </Field>

    <button type="submit">Sign Up</button>
  </Form>
</template>

<script setup>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

const onSubmit = (values) => {
  console.log(values);
};
</script>

Choosing the Right Library

Scenario	Recommended
New React project, performance-critical	React Hook Form
Legacy Formik codebase	Formik (stay consistent)
TypeScript-first project with complex nested forms	TanStack Form
Minimal bundle size, custom rendering	React Final Form
Vue ecosystem	VeeValidate
Multi-step wizards with independent sections	React Hook Form (useFormContext)
Dynamic array fields (add/remove items)	TanStack Form
Simple forms (email + password)	React Hook Form or Formik

For related reading on JavaScript component patterns, see our JavaScript state management comparison and JavaScript bundler guide.

FAQ

Why is React Hook Form faster than Formik?

React Hook Form registers inputs as uncontrolled — their values stay in the DOM, not React state. When you type in a form field, React Hook Form doesn’t trigger a re-render. Formik stores all values in React state via useState, so every keystroke triggers a re-render of the entire form component tree. For forms with 20+ fields, this performance difference is noticeable.

Can I migrate from Formik to React Hook Form?

Yes, but it’s a significant refactor. Formik’s <Field> components become register() calls, render props become hooks, and validationSchema becomes the resolver option. Start with isolated forms in new features rather than rewriting everything at once. Both libraries can coexist in the same application.

Does TanStack Form replace React Hook Form?

TanStack Form is newer and less battle-tested (6,596 ⭐ vs 44,784 ⭐). It offers better TypeScript support and array field handling, but React Hook Form has a larger ecosystem, more tutorials, and more third-party integrations. For new TypeScript-heavy projects, TanStack Form is compelling; for production teams that value ecosystem maturity, React Hook Form is safer.

What about Angular forms?

Angular has built-in Reactive Forms and Template-Driven Forms. Unlike React’s ecosystem where third-party libraries dominate, Angular’s built-in form system is comprehensive enough that community form libraries are rare. The concepts (validators, form groups, form arrays) map well to what React Hook Form provides.

How do I handle file uploads in these libraries?

All four libraries handle file inputs, but the approach differs. React Hook Form: use a Controller wrapper with a custom file input component. Formik: use setFieldValue in an onChange handler. TanStack Form: use field.handleChange with a FileList. React Final Form: wrap the file input in a custom Field render prop. None of these libraries handle the upload itself — they only manage the form state; you call fetch or axios in onSubmit for the actual upload.

Which has the smallest bundle size impact?

React Final Form is the smallest at 6.5 KB gzipped (core final-form + react-final-form). TanStack Form is 8.1 KB. React Hook Form is 9.5 KB. Formik is the largest at 12.6 KB. In practice, the difference is negligible compared to the typical React application bundle (150+ KB), but every kilobyte counts for performance budgets.

💰 想测试你的市场判断力？我用 Polymarket 做预测市场交易——这是全球最大的预测市场平台，从大选结果到技术监管时间线，什么都可以押注。和赌博不同，这是真正的信息市场：你懂的信息越多，胜率越高。我靠预测技术相关事件的走向已经赚了不少。用我的邀请链接注册：Polymarket.com