𝗕𝘂𝗹𝗹𝗲𝘁𝗽𝗿𝗼𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺𝘀: 𝗭𝗼𝗱 & 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗙𝗼𝗿𝗺
Formulare sind der Motor von B2B-SaaS-Produkten.
Die meisten Entwickler bauen Formulare auf die falsche Art. Sie verwenden Controlled Components. Das bedeutet, dass sie jedes Input-Feld an einen useState-Hook binden.
Dies führt zu Performance-Problemen.
Wenn Ihr Formular 20 Felder hat, löst das Tippen eines einzigen Buchstabens ein Re-Rendering des gesamten Formulars aus. Das Tippen eines Namens mit 10 Buchstaben erzwingt 10 vollständige Re-Renderings. Das macht Ihre App auf schwächeren Geräten langsam.
Manuelle Validierung ist ebenfalls ein Problem. Das Schreiben von „if“-Anweisungen für jedes Feld ist unordentlich. Es fehlt die TypeScript-Sicherheit.
Sie brauchen einen besseren Weg.
Nutzen Sie React Hook Form und Zod, um dies zu lösen.
React Hook Form verwendet Uncontrolled Inputs über HTML-Refs. Die Daten bleiben im DOM. Das Formular rendert nur dann neu, wenn es notwendig ist, zum Beispiel wenn ein Fehler auftritt.
Zod übernimmt Ihre Validierung. Es definiert die exakte Struktur Ihrer Daten.
Hier ist der Workflow:
Definieren Sie ein Zod-Schema. Dies dient als Ihre Single Source of Truth. Es bietet sowohl Laufzeitvalidierung als auch TypeScript-Typen.
Verwenden Sie den zodResolver. Dieser verbindet React Hook Form mit Ihrem Zod-Schema.
Verwenden Sie die register-Funktion. Diese verbindet Ihre Inputs mit dem Formular, ohne ständige Re-Renderings auszulösen.
Die Vorteile:
- Null Input-Lag. Große Formulare bleiben flüssig.
- Typsicherheit. Ihre Daten entsprechen den Erwartungen Ihrer API.
- Weniger Code. Sie müssen keine manuelle Validierungslogik mehr schreiben.
Hören Sie auf, gegen den React-State zu kämpfen. Nutzen Sie Refs und Schemas, um professionelle Formulare zu bauen.
Quelle: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j