כל אפליקציה שמעניינת כוללת form. Login, הרשמה, checkout, חיפוש, עריכת פרופיל - כולם forms. הבעיה? Forms הם המקום שבו הכי הרבה bugs נכנסים, הכי הרבה UX גרוע קיים, והכי הרבה קוד חוזר על עצמו.
בסקר שנתי של State of JavaScript, ניהול forms מדורג כאחד מה-pain points הגדולים ביותר של frontend developers שנה אחר שנה. לא בגלל שReact לא יודעת לעשות forms - בגלל שforms מכילים הרבה יותר logic ממה שנראה בתחילה. ב-2023, Stack Overflow Developer Survey מצא שניהול forms הוא אחד מחמשת הכאבים הכי גדולים של frontend developers. זה לא מפתיע - form שנראה פשוט מכיל לפחות: מצב של כל שדה, ולידציה, הצגת שגיאות, מצב loading בזמן submit, ו-UX של success/failure.
בשיעור הזה נבנה forms נכון - מ-controlled component בסיסי, דרך ולידציה מלאה עם react-hook-form ו-zod, עד לחוויית משתמש שנראית מוצר אמיתי.
ב-Papaya Global למשל, שהיא SaaS לניהול שכר גלובלי, יש forms של עשרות שדות עם ולידציה מורכבת תלויה בארץ המשתמש, currency handling, ו-conditional fields. בלי ספריית forms מסודרת, הקוד הזה היה הופך ל-nightmare תחזוקתי תוך חודשים. הדרך שנציג כאן - react-hook-form + zod - היא הגישה שחברות כאלה משתמשות בה בפועל.