نماذج React متينة: Zod و React Hook Form
النماذج هي المحرك الأساسي لمنتجات B2B SaaS.
معظم المطورين يبنون النماذج بطريقة خاطئة؛ حيث يستخدمون المكونات المُتحكم بها (controlled components). وهذا يعني ربط كل حقل إدخال بـ useState hook.
وهذا يتسبب في مشاكل في الأداء.
إذا كان نموذجك يحتوي على 20 حقلاً، فإن كتابة حرف واحد ستؤدي إلى إعادة رندرة (re-render) للنموذج بالكامل. كتابة اسم مكون من 10 أحرف ستجبر التطبيق على إجراء 10 عمليات إعادة رندرة كاملة، مما يجعل تطبيقك بطيئاً على الأجهزة الضعيفة.
كما أن التحقق اليدوي (manual validation) يمثل مشكلة أيضاً؛ فكتابة جمل "if" لكل حقل أمر فوضوي، كما أنه يفتقر إلى أمان TypeScript.
أنت بحاجة إلى طريقة أفضل.
استخدم React Hook Form و Zod لحل هذه المشكلة.
يستخدم React Hook Form مدخلات غير مُتحكم بها (uncontrolled inputs) عبر HTML refs. تظل البيانات في الـ DOM، ولا يتم إعادة رندرة النموذج إلا عند الضرورة، مثل ظهور خطأ ما.
يتولى Zod عملية التحقق من البيانات، حيث يحدد الهيكل الدقيق لبياناتك.
إليك سير العمل:
حدد مخطط Zod (Zod schema). يعمل هذا المخطط كمصدر وحيد للحقيقة (single source of truth)، ويوفر كلاً من التحقق أثناء التشغيل (runtime validation) وأنواع TypeScript.
استخدم
zodResolver. يقوم هذا بربط React Hook Form بمخطط Zod الخاص بك.استخدم دالة
register. تقوم هذه الدالة بربط مدخلاتك بالنموذج دون التسبب في عمليات إعادة رندرة مستمرة.
الفوائد:
- انعدام التأخير في الإدخال. تظل النماذج الكبيرة سلسة.
- أمان الأنواع (Type safety). بياناتك تتوافق مع توقعات الـ API الخاصة بك.
- كود أقل. ستتوقف عن كتابة منطق التحقق اليدوي.
توقف عن الصراع مع حالة React (React state). استخدم الـ refs والمخططات (schemas) لبناء نماذج احترافية.
المصدر: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j