Formular State Bibliotheken im Vergleich: RHF, Formik, TanStack Form

1. Warum Formular State ein eigenes Problem ist

Formular State unterscheidet sich fundamental von normalem Anwendungszustand: Ein Formular mit zwanzig Feldern hat nicht nur zwanzig Werte, sondern zusätzlich pro Feld einen Validierungsstatus, eine Fehlermeldung, einen Touched Status und häufig einen Dirty Status, der anzeigt, ob sich der Wert seit dem letzten Speichern geändert hat. Werden all diese Zustände naiv mit useState pro Feld verwaltet, ändert sich bei jedem Tastendruck in einem Feld theoretisch der gesamte Komponentenbaum, was bei größeren Formularen zu spürbaren Performance Problemen führt.

Spezialisierte Formular State Bibliotheken lösen dieses Problem durch unterschiedliche architektonische Ansätze: Manche halten Formular State komplett außerhalb des React Rerender Zyklus, andere isolieren Rerenders auf einzelne Felder durch gezielte Subscription Mechanismen. Die Wahl der richtigen Bibliothek hängt stark davon ab, wie groß die Formulare in einer Anwendung typischerweise sind und wie stark Validierung in Echtzeit während der Eingabe erfolgen muss.

Alle drei in diesem Artikel behandelten Bibliotheken, React Hook Form, Formik und TanStack Form, lösen dasselbe Kernproblem, unterscheiden sich aber deutlich in Performance Charakteristik, Bundle Size und Integrationsaufwand mit Schema Validierungsbibliotheken wie Zod.

2. Controlled versus Uncontrolled: der Architekturunterschied

Bei einer Controlled Komponente hält React den aktuellen Wert eines Input Feldes im State, jeder Tastendruck löst ein onChange Event aus, das den State aktualisiert und damit einen Rerender der Komponente triggert. Bei einer Uncontrolled Komponente verwaltet der Browser selbst den Wert des Input Feldes im DOM, React liest den Wert nur bei Bedarf aus, etwa über eine Ref, ohne bei jedem Tastendruck einen Rerender auszulösen.

Dieser Architekturunterschied ist der Hauptgrund für die unterschiedliche Performance Charakteristik der drei Bibliotheken. React Hook Form setzt konsequent auf Uncontrolled Components und Refs, wodurch die meisten Tastatureingaben ganz ohne React Rerender im nativen DOM verarbeitet werden. Formik hingegen basiert auf Controlled Components mit explizitem State pro Feld, was näher am klassischen React Modell liegt, aber bei großen Formularen mehr Rerenders erzeugt.

3. React Hook Form im Detail: Uncontrolled Performance First

React Hook Form registriert Felder über die register Funktion, die eine Ref sowie Event Handler zurückgibt, welche direkt an ein natives Input Element gebunden werden. Weil React Hook Form den Feldwert intern über Refs statt über React State verfolgt, verursacht Tippen in einem Feld standardmäßig keinen Rerender der umgebenden Komponente, was bei Formularen mit vielen Feldern einen spürbaren Performance Vorteil gegenüber Controlled Ansätzen bringt.

Der Hook useForm liefert neben register auch handleSubmit, das automatisch Validierung durchführt, bevor der eigentliche Submit Handler aufgerufen wird, sowie formState mit Feldern wie errors und isSubmitting. Wichtig für Performance: Der Zugriff auf formState Felder ist selbst über einen Proxy granular optimiert, sodass eine Komponente, die nur errors.email liest, nicht bei jeder Änderung eines anderen Feldes neu rendert.

// components/SignupForm.jsx — React Hook Form: uncontrolled fields via refs, minimal rerenders
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'At least 8 characters'),
});

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

  async function onSubmit(data) {
    await fetch('/api/signup', { method: 'POST', body: JSON.stringify(data) });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <p role="alert">{errors.email.message}</p>}

      <input type="password" {...register('password')} />
      {errors.password && <p role="alert">{errors.password.message}</p>}

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

4. Formik im Detail: etabliert, aber langsamer

Formik war über viele Jahre die dominierende Formular Bibliothek im React Ökosystem und basiert konsequent auf Controlled Components: Der Formik Context hält Werte, Fehler und Touched Status für jedes Feld im React State, und die Field Komponente verbindet ein Input Element über value und onChange mit diesem zentralen State.

Diese Architektur macht Formik konzeptionell einfacher nachzuvollziehen, weil sie näher am klassischen React Datenfluss mit explizitem State und Props bleibt, hat aber einen messbaren Performance Nachteil: Da jeder Tastendruck den zentralen Formik State aktualisiert, rendert standardmäßig der gesamte Formular Baum bei jeder Eingabe neu, sofern nicht explizit mit React.memo oder dem useField Hook auf Feldebene optimiert wird. Bei Formularen mit mehr als etwa fünfzehn bis zwanzig Feldern wird dieser Unterschied gegenüber React Hook Form in der Praxis spürbar, besonders auf schwächerer Hardware oder bei komplexen Validierungsregeln, die bei jeder Änderung neu ausgewertet werden.

// components/SignupForm.jsx — Formik: controlled fields, central state re-renders the tree
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { toFormikValidationSchema } from 'zod-formik-adapter';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'At least 8 characters'),
});

function SignupForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={toFormikValidationSchema(schema)}
      onSubmit={async (values) => {
        await fetch('/api/signup', { method: 'POST', body: JSON.stringify(values) });
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field name="email" />
          <ErrorMessage name="email" component="p" />

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

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

5. TanStack Form im Detail: headless und framework agnostisch

TanStack Form ist die jüngste der drei Bibliotheken und folgt der Headless Philosophie, die auch TanStack Query und TanStack Table auszeichnet: keine vorgefertigten UI Komponenten, sondern reine State und Logik Primitiven, die sich mit beliebigem Markup verbinden lassen. Der zentrale Hook useForm liefert Feld API Objekte über form.Field, wobei jedes Feld seinen eigenen, granular isolierten Subscription Bereich bekommt.

Ein Alleinstellungsmerkmal von TanStack Form ist die Framework Agnostik: Dieselbe Core Bibliothek funktioniert nicht nur mit React, sondern auch mit Vue, Solid und Angular über dünne Adapter Pakete, was für Teams mit mehreren Frontend Frameworks im selben Unternehmen ein relevanter Vorteil sein kann. Für reine React Projekte bietet TanStack Form eine vergleichbare Performance wie React Hook Form, jedoch mit einer expliziteren, mehr auf Type Inference ausgelegten API, die in TypeScript Projekten besonders präzise Typen für verschachtelte Formularstrukturen liefert.

// components/SignupForm.jsx — TanStack Form: headless, field level subscriptions
import { useForm } from '@tanstack/react-form';
import { z } from 'zod';

const emailSchema = z.string().email('Invalid email address');

function SignupForm() {
  const form = useForm({
    defaultValues: { email: '', password: '' },
    onSubmit: async ({ value }) => {
      await fetch('/api/signup', { method: 'POST', body: JSON.stringify(value) });
    },
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
      <form.Field
        name="email"
        validators={{ onChange: ({ value }) => emailSchema.safeParse(value).success ? undefined : 'Invalid email' }}
      >
        {(field) => (
          <>
            <input value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
            {field.state.meta.errors.length > 0 && <p role="alert">{field.state.meta.errors[0]}</p>}
          </>
        )}
      </form.Field>
      <button type="submit">Sign up</button>
    </form>
  );
}

6. Validierung: Zod, Yup und Schema basierte Ansätze

Alle drei Bibliotheken haben sich in den letzten Jahren von eigenen, proprietären Validierungs APIs hin zu Schema basierter Validierung mit externen Bibliotheken wie Zod oder Yup entwickelt. Der Vorteil dieser Trennung: Dieselbe Zod Schema Definition lässt sich sowohl clientseitig für Formular Validierung als auch serverseitig für die Validierung eingehender API Requests wiederverwenden, wodurch Validierungslogik nicht doppelt gepflegt werden muss.

React Hook Form integriert Zod über den offiziellen @hookform/resolvers Adapter direkt in useForm, TanStack Form akzeptiert Zod Schemas oder beliebige Validator Funktionen granular pro Feld oder für das gesamte Formular, und Formik benötigt für Zod Unterstützung einen Community Adapter, da native Zod Integration erst später hinzugefügt wurde. In allen drei Fällen liefert eine fehlgeschlagene Validierung strukturierte Fehlermeldungen, die sich direkt neben dem jeweiligen Feld anzeigen lassen, ohne dass Fehlerbehandlung manuell für jedes Feld separat implementiert werden muss.

7. Performance bei großen Formularen und Feld Isolation

Bei Formularen mit wenigen Feldern spielt die Wahl der Bibliothek für die tatsächliche Performance kaum eine Rolle, alle drei Ansätze sind für zehn Felder oder weniger praktisch identisch schnell wahrnehmbar. Der Unterschied wird erst bei umfangreichen Formularen mit fünfzig oder mehr Feldern relevant, etwa bei mehrstufigen Konfiguratoren oder komplexen Einstellungsseiten mit vielen verschachtelten Optionen.

React Hook Form und TanStack Form isolieren Rerenders standardmäßig auf Feldebene, wodurch ein einzelner Tastendruck in einem Feld keine Rerenders in anderen, unveränderten Feldern auslöst. Formik erreicht dieselbe Isolation nur mit zusätzlichem manuellem Aufwand über den useField Hook kombiniert mit React.memo auf einzelnen Feld Komponenten. Für Anwendungen mit sehr großen, dynamischen Formularen mit Feldarrays, etwa Rechnungspositionen mit variabler Anzahl, ist die eingebaute Feld Isolation von React Hook Form und TanStack Form ein spürbarer praktischer Vorteil gegenüber Formik.

8. Server Actions und Formular State in React 19

React 19 hat mit Server Actions und dem neuen useActionState Hook eine native, bibliotheksunabhängige Alternative für einfachere Formulare eingeführt: Ein Formular kann direkt eine async Server Funktion als action Prop übergeben, ohne dass ein onSubmit Handler oder eine der drei Formular Bibliotheken benötigt wird. Für Formulare ohne komplexe clientseitige Live Validierung ist das native React Pattern häufig ausreichend und spart eine zusätzliche Abhängigkeit.

Für Formulare mit umfangreicher clientseitiger Validierung während der Eingabe, dynamischen Feldarrays oder mehrstufigen Wizard Flows bleibt jedoch eine dedizierte Formular Bibliothek überlegen, weil native Server Actions primär für den Submit Moment optimiert sind und keine eingebaute Feld für Feld Validierung während der Eingabe mitbringen. React Hook Form lässt sich zudem problemlos mit Server Actions kombinieren, indem handleSubmit die validierten Daten an eine Server Action weiterreicht, was clientseitige Validierung mit serverseitiger Verarbeitung verbindet.

9. Die drei Bibliotheken im direkten Vergleich

Die folgende Tabelle fasst die praxisrelevanten Unterschiede zusammen.

10. Zusammenfassung

Die Wahl zwischen React Hook Form, Formik und TanStack Form hängt vor allem von der Formulargröße, dem gewünschten Architekturmodell und eventuellen Anforderungen an Framework Agnostik ab. React Hook Form bietet dank Uncontrolled Components und Refs die beste Out of the Box Performance bei großen Formularen und eine offizielle Zod Integration. Formik bleibt für kleinere Formulare und Teams, die den klassischen Controlled Ansatz bevorzugen, eine solide, sehr etablierte Wahl, verlangt bei großen Formularen aber zusätzliche Optimierungsarbeit.

TanStack Form überzeugt mit granularer Feld Isolation auf Augenhöhe mit React Hook Form und dem zusätzlichen Vorteil der Framework Agnostik für Teams mit mehreren Frontend Stacks. Für einfache Formulare ohne komplexe Live Validierung ist seit React 19 zudem das native Server Action Pattern über useActionState eine schlanke Alternative, die ganz ohne zusätzliche Formular Bibliothek auskommt.

11. FAQ: Formular State Bibliotheken