Erklär controlled gegen uncontrolled Components und wie du für ein Formular zwischen beiden wählst.

Bei einer controlled Component ist React-State die Quelle der Wahrheit: Das Input liest seinen Wert aus dem State, und jeder Tastendruck läuft durch onChange. Bei einer uncontrolled Component hält das DOM den Wert, und du liest ihn per Ref oder beim Submit aus den Formulardaten. Controlled gibt dir Live-Validierung und abgeleitete UI, uncontrolled bedeutet deutlich weniger Renders und weniger Code bei großen Formularen.

Controlled heißt, React besitzt den Wert: value kommt aus dem State, onChange schreibt zurück, und das Input kann sich ohne Render nicht ändern. Uncontrolled heißt, das DOM besitzt ihn, und ich lese ihn nur, wenn ich ihn brauche, entweder über eine Ref oder aus den abgeschickten Formulardaten. Mein Standard bei kleinen Formularen ist controlled, weil ich meist Validierung während des Tippens will oder ein Feld, das von einem anderen abhängt. Sobald ein Formular grob über fünfzehn bis zwanzig Inputs geht, oder sobald ein Feld bei jedem Tastendruck ein teures Re-Render auslöst, wechsle ich auf uncontrolled und validiere on blur und beim Submit. Genau das machen die gängigen Formular-Libraries unter der Haube auch, sie registrieren Inputs und abonnieren eng, statt das ganze Formular neu zu rendern. Mit den Form Actions aus React 19 gehe ich noch stärker in Richtung uncontrolled, weil die Action die FormData geschenkt bekommt. Für ein simples Anlege- oder Bearbeitungsformular spare ich mir den State komplett und behandle Pending- und Fehlerzustand einfach über useActionState.