Niezawodne formularze w React: Zod & React Hook Form

Formularze napędzają produkty B2B SaaS.

Większość programistów buduje formularze w niewłaściwy sposób. Używają komponentów kontrolowanych. Oznacza to, że wiążą każde pole wejściowe z hookiem useState.

Powoduje to problemy z wydajnością.

Jeśli Twój formularz ma 20 pól, wpisanie jednej litery wywołuje ponowne renderowanie całego formularza. Wpisanie 10-literowego imienia wymusza 10 pełnych re-renderów. Sprawia to, że Twoja aplikacja działa wolno na słabszych urządzeniach.

Ręczna walidacja to również problem. Pisanie instrukcji „if” dla każdego pola jest niechlujne. Brakuje w tym bezpieczeństwa typów TypeScript.

Potrzebujesz lepszego rozwiązania.

Użyj React Hook Form i Zod, aby to naprawić.

React Hook Form używa niekontrolowanych pól wejściowych za pomocą HTML refs. Dane pozostają w DOM. Formularz renderuje się ponownie tylko wtedy, gdy jest to konieczne, np. gdy pojawi się błąd.

Zod zajmuje się walidacją. Definiuje on dokładny kształt Twoich danych.

Oto przepływ pracy:

  1. Zdefiniuj schemat Zod. Pełni on rolę Twojego pojedynczego źródła prawdy (single source of truth). Zapewnia zarówno walidację w czasie wykonywania (runtime), jak i typy TypeScript.

  2. Użyj zodResolver. Łączy on React Hook Form z Twoim schematem Zod.

  3. Użyj funkcji register. Łączy ona Twoje pola wejściowe z formularzem bez wywoływania ciągłych re-renderów.

Korzyści:

  • Zero opóźnień przy wprowadzaniu danych. Duże formularze działają płynnie.
  • Bezpieczeństwo typów. Twoje dane są zgodne z oczekiwaniami API.
  • Mniej kodu. Przestajesz pisać ręczną logikę walidacji.

Przestań walczyć ze stanem React. Używaj refs i schematów, aby budować profesjonalne formularze.

Źródło: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j