Von Forms zu Mutations – wie sich Datenhandling in React weiterentwickelt hat

Hinweis: Dieser Artikel wurde unter Zuhilfenahme von KI aus dem Englischen übersetzt. Hier geht's zum Originaltext.

Formulare sind ein wesentlicher Bestandteil vieler Webanwendungen, da sie Steuerelemente zur Erfassung und Übermittlung von Benutzerinformationen bieten. Sie decken zahlreiche Anwendungsfälle ab – von der Benutzerregistrierung bis zur Feedback-Übermittlung – und ermöglichen es Nutzern, Aktionen wie das Absenden von Suchanfragen, die Konfiguration von Einstellungen oder das Anwenden von Filtern durchzuführen. Formulare gehören zu den Hauptmethoden, um Daten vom Client zum Server zu senden, üblicherweise über HTTP-Anfragen (wie POST oder GET). Wenn eine Formularübermittlung die Daten auf dem Server verändert, wird dies als Mutation bezeichnet. Diese Kommunikation ist für die meisten dynamischen Interaktionen im Web unverzichtbar.

In diesem Artikel werden wir tief in die Evolution der Formular-Mutationen im Web eintauchen, mit Fokus auf die Verwendung von Formularen in React. Wir betrachten einige Best Practices für die Arbeit mit Formularen in React, wie bestimmte Browser-Standardverhalten in den Kern der React-Bibliothek mit dem React 19 Release aufgenommen wurden und wie Entwickler diese Funktionen nutzen können, um die Benutzererfahrung und Barrierefreiheit von Webanwendungen zu verbessern.

Bevor wir uns damit befassen, wie Formulare in React gehandhabt werden, sollten wir uns kurz in Erinnerung rufen, wie Formulare in reinem HTML funktionieren.

HTML-Formulare wurden offiziell in der HTML 2.0-Spezifikation im Jahr 1995 eingeführt. Verschiedene Eingabetypen wie Text, Passwort, Radiobuttons und andere wurden definiert, um die Benutzerinteraktion im Web zu erleichtern. Die Einführung von HTML5 im Jahr 2014 brachte zahlreiche Verbesserungen für Formulare mit sich, darunter neue Eingabetypen (E-Mail, URL, Datum, Zeit, Zahl, Bereich, Farbe und Suche), neue Attribute (required, pattern, min, max, step, multiple und placeholder) und neue Elemente (datalist und output). Heute sind Formulare leistungsstark und helfen uns, verschiedene Arten von Benutzerinformationen zu sammeln.

Sobald diese Informationen gesammelt wurden, müssen sie zur Speicherung oder Verarbeitung an den Server übermittelt werden. Dies geschieht durch eine HTTP-Anfrage, typischerweise mit der GET- oder POST-Methode. Das method-Attribut des <form>-Elements bestimmt, wie die Daten an den Server gesendet werden, entweder per get oder post (oder dialog, was für diesen Artikel nicht relevant ist). Wenn kein Wert angegeben wird, ist die Standardeinstellung get. Die action-Eigenschaft des <form>-Elements gibt die Server-URL an, an die die Formulardaten (FormData ist ein Satz von Schlüssel/Wert-Paaren, die Formularfelder und ihre Werte repräsentieren) gesendet werden sollen. Der Server antwortet nach dem Absenden des Formulars an die action-URL mit einer neuen HTML-Seite.

Wenn ein Formular mit der get-Methode abgesendet wird, werden die Formulardaten als Abfragezeichenfolge mit einem ?-Trennzeichen an die action-URL angehängt. Diese Methode eignet sich für die Übermittlung nicht sensibler Daten, ist jedoch durch URL-Längenbeschränkungen in der Menge der an den Server gesendeten Daten begrenzt. Ein Beispiel hierfür ist eine Filter-Checkbox auf einer E-Commerce-Website:

Wenn ein Benutzer das erste Kontrollkästchen auswählt und auf die Schaltfläche "Filter anwenden" klickt, um das Formular abzusenden, wird das Schlüssel-Wert-Paar des ausgewählten Kontrollkästchens als URL-codierter Abfrageparameter an die Action-URL angehängt, und der Browser sendet eine HTTP-GET-Anfrage an den Server.

Der einzige Unterschied zwischen einer Formular-get-Übermittlung und einem a-Link-href besteht darin, dass der Benutzer für die Bereitstellung der Informationen im Formular verantwortlich ist. Ansonsten handelt es sich bei beiden um eine standardmäßige Webnavigation. Die obige Aktion ähnelt der Navigation, die der Benutzer durch direktes Klicken auf den Link einleitet:

Eine der Einschränkungen bei der Verwendung von get besteht darin, dass diese Methode nur verwendet werden sollte, um Daten vom Server anzufordern. Wir können der Anfrage keine Daten hinzufügen, was für die Erfassung von Benutzerinformationen entscheidend ist (technisch ausgedrückt: eine Datenmutation durchführen). Um Inhalte zusammen mit der HTTP-Anfrage an den Server zu senden, müssen wir die method des Formulars ändern.

Durch das Absenden eines Formulars mit der post-Methode können die Formulardaten als HTTP-Anfragekörper an den Server gesendet werden. Dies ermöglicht Datenmutationen, bei denen ein Benutzer Daten auf dem Server erstellen, aktualisieren oder löschen kann.

Wenn ein Benutzer seinen Namen eingibt und das obige Benutzerregistrierungsformular absendet, codiert der Browser die Formulardaten (Schlüssel-Wert-Paar) in den Anfragekörper und sendet sie durch Navigation zur Action-URL als HTTP-POST-Anfrage an den Server. Hier ist ein Beispiel dafür, wie der Server auf POST-Anfragen hören könnte, die an den Action-Endpunkt gesendet werden (der erste Code-Ausschnitt verwendet die PHP-Skriptsprache, während der zweite Ausschnitt das JavaScript-Webframework Hono verwendet):

Wenn der Server mit einer Umleitung antwortet, löst der Browser eine neue GET-Anfrage an die Umleitungs-URL aus, um das neue HTML zum Anzeigen abzurufen. Der Browser zeigt während der Formularübermittlung einen Ladeindikator an (in den meisten Browsern verwandelt sich das Favicon in einen Spinner), und die Übermittlung (Navigation) führt zu einem vollständigen Neuladen der Seite im Browser. Der Browser ist vollständig für die Bereitstellung von Client-seitigem UI-Feedback (Pending-UI) verantwortlich. Es ist wichtig zu beachten, dass vollständige Seitenneuladen in der Regel unerwünscht sind.

Um reichhaltige, dynamisch generierte und interaktive Webanwendungen zu erstellen, war es wichtig, vollständige Seitenneuladen zu vermeiden und das UI-Feedback auf dem Client bei der Durchführung von Mutationen anzupassen. AJAX (Asynchronous JavaScript and XML) wurde 2005 entwickelt, um dieses Problem zu lösen. Es verwendet eine XMLHttpRequest (XHR), um Daten zwischen Client und Server auszutauschen, ohne die gesamte Seite neu zu laden. Während XHR eine ausführliche und umständliche API hat, verbesserte jQuery, das 2006 veröffentlicht wurde, die Ergonomie der Arbeit mit AJAX-Anfragen erheblich.

Um AJAX jedoch zum Absenden des Formulars zu verwenden, müssen wir das Formularübermittlungsereignis abfangen und verhindern, dass der Browser es verarbeitet (was sonst die Seite neu laden würde). Stattdessen verwenden wir JavaScript, um das Formular zu serialisieren und die Daten an einen Server-Endpunkt zu senden. Das erklärt die häufige Verwendung der bekannten Codezeile event.preventDefault(), die in der Webentwicklungsgeschichte weit verbreitet ist.

Der Nachteil dieses Ansatzes besteht darin, dass der Aufruf von event.preventDefault() dazu führt, dass wir auf alle Annehmlichkeiten verzichten, die der Browser standardmäßig bietet. Das bedeutet, dass wir die Pending-UI manuell verwalten, die Benutzeroberfläche nach der Übermittlung aktualisieren und Abbrüche sowie Rennbedingungen behandeln müssen. Wir müssen auch sicherstellen, dass wir die Funktionalität der "Zurück"-Schaltfläche nicht beeinträchtigen, die Barrierefreiheit nicht stören oder Leistungsengpässe verursachen.

React v19 hilft bei diesen Problemen, aber schauen wir uns an, wie wir hierher gekommen sind.

Als die React-Bibliothek 2013 auftauchte, war jQuery eines der beliebtesten Tools für den Aufbau von Webanwendungen. React wurde häufig mit clientseitigen Routing-Bibliotheken wie React Router verwendet, um Single-Page-Anwendungen (SPA) zu erstellen. In Bezug auf die Formularverarbeitung gab es jedoch kaum Unterschiede in der Verwaltung von Datenmutationen im Vergleich zur Verwendung von AJAX mit jQuery. Obwohl fetch AJAX ersetzte, mussten Entwickler immer noch pending-Zustände, Fehler, optimistische Updates und sequenzielle Anfragen ohne zusätzliche Hilfe von der Bibliothek verwalten.

Ein wesentlicher Unterschied liegt jedoch in der Art und Weise, wie der Formularstatus in React gehandhabt wird. Bei jQuery lebt der Anwendungsstatus im DOM, und das DOM ist die "einzige Quelle der Wahrheit" für den Formularstatus. React unterstützt auch Formularelemente, die ihren internen Zustand über das DOM verwalten, und React-Komponenten, die solche Elemente rendern, werden als unkontrollierte Komponenten bezeichnet. Refs werden dann verwendet, um Formularwerte während der Übermittlung aus den DOM-Elementen abzurufen. Da Refs eine imperative Möglichkeit bieten, mit den Formularelementen außerhalb der Kontrolle von React zu interagieren, empfiehlt React einen deklarativen Ansatz. Dies wird durch kontrollierte Komponenten erreicht, bei denen der React-Zustand die "einzige Quelle der Wahrheit" ist, da die React-Komponente, die das Formular rendert, auch dessen Verhalten bei nachfolgenden Benutzereingaben steuert. Kontrollierte Eingaben akzeptieren ihre aktuellen Werte als React-Props und haben einen onChange-Event-Handler, um diese Werte zu aktualisieren, wenn sich die Benutzereingabe ändert.

Lange Zeit waren React-Entwickler zwischen diesen beiden Ansätzen zur Handhabung von Formularen in React gespalten, was sich auch in zwei der beliebtesten React-Formularbibliotheken zeigte: Formik verwendet kontrollierte Komponenten und React Hook Form verwendet standardmäßig unkontrollierte Komponenten. Während kontrollierte Formularkomponenten den Nachteil von mehr Boilerplate-Code und Leistungsproblemen mit sich bringen, sind unkontrollierte Komponenten schwieriger mit anderen Anwendungszuständen zu synchronisieren, und die Arbeit mit Refs war vor React v19 komplizierter. Dies zwang Entwickler dazu, sich besonders bei komplexen Formularen auf Formularbibliotheken zu verlassen.

Während der React Conf 2024 Keynote bemerkte Andrew Clark, dass das Remix-Webframework ein Wiederaufleben aktionsbasierter APIs in JavaScript-Frameworks als Muster für die Client-Server-Kommunikation inspiriert hat. Er fügt hinzu, dass dieses Muster perfekt zum React-Programmiermodell passt. Daher hat das React-Team aktionsbasierte APIs in React integriert, um direkt mit Funktionen wie Streaming, Suspense und Transitions zusammenzuarbeiten. Um von diesen Funktionen voll zu profitieren, werden Webframeworks auf ihnen als Grundlage aufbauen und zusätzliche Funktionalität bereitstellen. Trotzdem sind Aktionen nicht ausschließlich serverbasierter Frameworks vorbehalten – sie funktionieren auch auf dem Client, selbst ohne ein Server-Framework.

Obwohl dieser Artikel nicht darauf eingeht, wie Server-Frameworks diese neuen APIs verwenden, erklärt er, wie diese APIs die Art und Weise verändern, wie wir Formulare auf dem Client handhaben, was gleich bleibt, unabhängig davon, ob die Anwendung vollständig clientseitig oder server-gerendert ist.

React 19 führt signifikante Änderungen in der Handhabung von Formulardaten mit neuen Formularfunktionen ein. Die bemerkenswerteste Änderung ist die Möglichkeit, eine Funktion für die action-Eigenschaft von <form>-Elementen bereitzustellen. Wenn eine URL an action übergeben wird, verhält sich das Formular wie ein normales HTML-Formular, wie oben beschrieben. Wenn jedoch eine Funktion an action übergeben wird, ruft React diese auf, wenn das Formular abgesendet wird, und übergibt ihr ein einzelnes Argument, das die FormData des übermittelten Formulars enthält. Diese Funktion wird als Formular-Action bezeichnet und kann synchron oder asynchron sein. Die Formular-Action-Funktion kann auch an die formAction-Prop eines <button>, <input type="submit"> oder <input type="image">-Elements übergeben werden. Actions sind ein allgemeines Muster für asynchrone Datenaktualisierungen als Reaktion auf Benutzereingaben. Actions bauen auf der HTML-Formular-API und React-Transitions auf (indem sie Unterstützung für async-Funktionen hinzufügen).

HINWEIS: Es ist üblich, konzeptionelle Muster oder Schlüsselbegriffe von React mit großgeschriebenen Wörtern zu bezeichnen, zum Beispiel "Action" statt "action". Dies hilft, diese wichtigen Begriffe zu unterscheiden und zu betonen, dass sie im Kontext von React eine besondere Bedeutung haben.

HINWEIS: Wenn eine Funktion an die Prop action oder formAction übergeben wird, wird die HTTP-Methode POST zum Übermitteln der Daten verwendet, unabhängig vom Wert der Prop method oder formMethod.

HINWEIS: Das React-Team empfiehlt, das Suffix Action bei der Benennung von Aktionen zu verwenden, ähnlich wie wir das Präfix on oder handle bei der Benennung von Event-Handlern verwenden.

React befürwortet nun die Verwendung des eingebauten HTML-<form>-Elements für Übermittlungen und unterstützt Progressive Enhancement, da Formulare auch ohne JavaScript funktionieren können. Außerdem richtet die Verwendung der nativen FormData-Browser-API React stärker an Webstandards aus und beseitigt die Notwendigkeit für Abstraktionen und benutzerdefinierten Boilerplate-Code.

HINWEIS: Der Standard-Button-Typ ist submit, was für dieses Paradigma problematisch sein könnte, da alle Schaltflächen innerhalb eines Formulars implizit eine Formularübermittlung auslösen würden. Es wird empfohlen, eine ESLint-Regel zu verwenden, um sich davor zu schützen.

React unterstützt auch die Verwendung von Actions außerhalb von <form>-Elementen, indem es uns ermöglicht, die asynchrone Übermittlungsfunktion innerhalb einer React Transition aufzurufen. Die Transition stellt uns auch ein isPending-Flag zur Verfügung, das angibt, ob sie ausstehend ist, sodass wir dies nicht mehr selbst verfolgen müssen. Die Möglichkeit, async/await in Transitions zu verwenden, wurde in React 19 hinzugefügt.

Wenn eine Formular-Action erfolgreich ist, setzt React automatisch die unkontrollierten Eingaben des Formulars zurück. Es ist dasselbe, als würde man form.reset() manuell aufrufen, außer dass React den Zeitpunkt des Resets festlegt, was schwierig oder unmöglich ist, exakt richtig hinzubekommen. Eine neue API requestFormReset(form) wurde ebenfalls zu React DOM hinzugefügt, um das manuelle Zurücksetzen des Formulars zu unterstützen.

Ein Vorteil der Verwendung von Actions besteht darin, dass React den Lebenszyklus der Datenübermittlung für uns verwaltet, was es uns ermöglicht, eine Pending-UI anzuzeigen und auf den aktuellen Status und die Antwort der Action zuzugreifen.

React 19 führt auch mehrere neue Hooks ein, um häufige Anwendungsfälle für Actions und Formular-Actions zu unterstützen.

Dieser Hook stellt Statusinformationen zur letzten Formularübermittlung bereit und sollte nur in einer Komponente aufgerufen werden, die innerhalb eines <form>-Elements gerendert wird. Er ist nützlich, um den Pending-Status bereitzustellen, wenn mit Server Functions gearbeitet wird, da Formulare Server Functions automatisch in Transitions einpacken. Andernfalls kann dieselbe Funktionalität in Client-Komponenten mit dem isPending-Flag aus dem useTransition-Hook erreicht werden. Wir können das <form> in einen Error Boundary einpacken, um Fehler zu behandeln, die von der Formular-Action geworfen werden.

useFormStatus liest den Status des übergeordneten <form> so, als wäre das Formular ein Context-Provider.

Dieser Hook ermöglicht es uns, den Zustand basierend auf dem Ergebnis einer Formular-Action zu aktualisieren. Er akzeptiert eine Action-Funktion und wickelt sie in eine Transition ein, gibt die eingepackte Action, ein isPending-Flag und den aktuellen von der Action zurückgegebenen Zustand zurück. Die an useActionState übergebene Funktion erhält ein zusätzliches Argument, den vorherigen oder initialen Zustand, als erstes Argument, was ihre Signatur anders macht, als wenn sie direkt als Formular-Action ohne Verwendung von useActionState verwendet würde.

Dieser Hook ermöglicht es uns, die Benutzeroberfläche optimistisch zu aktualisieren, indem wir einen anderen Zustand anzeigen, während die asynchrone Aktion im Gange ist. Dieser Zustand wird automatisch zurückgesetzt, sobald der endgültige Zustand festgeschrieben wird, was den Eindruck von Geschwindigkeit und Reaktionsfähigkeit vermittelt.

Während sich dieser Artikel nur darauf konzentriert, wie die neuen Formularfunktionen in React 19 die Formulardatenverarbeitung in rein clientseitigen Anwendungen verbessern, sind diese Funktionen noch interessanter, wenn sie mit einem React Server Components Framework wie Next.js kombiniert werden, da das React-Team die Bibliothek umstrukturiert hat, um natürlich und standardmäßig auf dem Server arbeiten zu können. In diesem Artikel haben wir unser Formular an einen Backend-Endpunkt übermittelt, aber mit React Server Components führt React native Unterstützung für die Verwendung von Server Functions als Formular-Actions ein. Server Functions sind exponierte Server-Endpunkte, die von überall im Client-Code aufgerufen werden können. Wenn der Benutzer das Formular absendet, wird eine Netzwerkanfrage an die Server Function gesendet. Diese Frameworks ermöglichen es Entwicklern, Progressive Enhancement zu implementieren, um sicherzustellen, dass Anwendungen auch ohne clientseitiges JavaScript funktionsfähig bleiben.

Bei Peerigon sind wir Experten für React und Webtechnologien, mit über 10 Jahren Erfahrung im Aufbau von Webprojekten. Wir bieten Beratung, Entwicklung individueller Software und sogar React-Trainingsworkshops für Teams an, die React-Anwendungen wie Profis erstellen möchten. Kontaktieren Sie uns gerne, und lassen Sie uns gemeinsam etwas Großartiges schaffen.

🤖 Hinweis zur Verwendung von KI in diesem Artikel: Dieser Artikel wurde von Menschen verfasst (danke für das Feedback, Leonhard!), einschließlich des Titels, der Konzepte und der Codebeispiele. Wir haben jedoch KI verwendet, um den Schreibstil zu verbessern.

Titelbild von Suzanne D. Williams auf Unsplash