مضبوط React Forms: Zod اور React Hook Form
فارمز B2B SaaS پروڈکٹس کی بنیاد ہوتے ہیں۔
زیادہ تر ڈویلپرز فارمز غلط طریقے سے بناتے ہیں۔ وہ controlled components کا استعمال کرتے ہیں۔ اس کا مطلب ہے کہ وہ ہر input کو useState hook کے ساتھ جوڑ دیتے ہیں۔
اس سے کارکردگی (performance) کے مسائل پیدا ہوتے ہیں۔
اگر آپ کے فارم میں 20 فیلڈز ہیں، تو ایک حرف ٹائپ کرنے سے پورے فارم کا re-render ہو جاتا ہے۔ 10 حروف والا نام ٹائپ کرنے سے 10 بار مکمل re-renders ہوتے ہیں۔ یہ آپ کی ایپ کو کمزور (low-end) ڈیوائسز پر سست بنا دیتا ہے۔
دستی (Manual) validation بھی ایک مسئلہ ہے۔ ہر فیلڈ کے لیے "if" اسٹیٹمنٹس لکھنا الجھن کا باعث بنتا ہے۔ اس میں TypeScript safety کی کمی ہوتی ہے۔
آپ کو ایک بہتر طریقے کی ضرورت ہے۔
اس مسئلے کو حل کرنے کے لیے React Hook Form اور Zod کا استعمال کریں۔
React Hook Form HTML refs کے ذریعے uncontrolled inputs کا استعمال کرتا ہے۔ ڈیٹا DOM میں رہتا ہے۔ فارم صرف ضرورت پڑنے پر ہی re-render ہوتا ہے، جیسے کہ جب کوئی error ظاہر ہو۔
Zod آپ کی validation کو سنبھالتا ہے۔ یہ آپ کے ڈیٹا کی درست ساخت (shape) کو متعین کرتا ہے۔
ورک فلو (workflow) یہ ہے:
ایک Zod schema متعین کریں۔ یہ آپ کے "single source of truth" کے طور پر کام کرتا ہے۔ یہ runtime validation اور TypeScript types دونوں فراہم کرتا ہے۔
zodResolverکا استعمال کریں۔ یہ React Hook Form کو آپ کے Zod schema سے جوڑتا ہے۔registerفنکشن کا استعمال کریں۔ یہ مسلسل re-renders پیدا کیے بغیر آپ کے inputs کو فارم سے جوڑتا ہے۔
فوائد:
- ان پٹ میں کوئی تاخیر (lag) نہیں ہوتی۔ بڑے فارمز بھی ہموار (smooth) رہتے ہیں۔
- Type safety۔ آپ کا ڈیٹا آپ کی API کی توقعات کے مطابق ہوتا ہے۔
- کم کوڈ۔ آپ دستی validation logic لکھنا بند کر دیتے ہیں۔
React state سے لڑنا چھوڑ دیں۔ پیشہ ورانہ فارمز بنانے کے لیے refs اور schemas کا استعمال کریں۔
ماخذ (Source): https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j