𝗕𝘂𝗹𝗹𝗲𝘁𝗽්රൂഫ് 𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺𝘀: 𝗭𝗼𝗱 & 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗙𝗼𝗿𝗺
B2B SaaS ഉൽപ്പന്നങ്ങളുടെ പ്രധാന ഭാഗമാണ് ഫോമുകൾ.
മിക്ക ഡെവലപ്പർമാരും തെറ്റായ രീതിയിലാണ് ഫോമുകൾ നിർമ്മിക്കുന്നത്. അവർ controlled components ആണ് ഉപയോഗിക്കുന്നത്. അതായത്, ഓരോ ഇൻപുട്ടിനെയും ഒരു useState ഹുക്കുമായി ബന്ധിപ്പിക്കുന്നു.
ഇത് പെർഫോമൻസ് പ്രശ്നങ്ങൾക്ക് കാരണമാകുന്നു.
നിങ്ങളുടെ ഫോമിൽ 20 ഫീൽഡുകൾ ഉണ്ടെങ്കിൽ, ഒരു അക്ഷരം ടൈപ്പ് ചെയ്യുമ്പോൾ പോലും മുഴുവൻ ഫോമും വീണ്ടും റെൻഡർ (re-render) ചെയ്യപ്പെടുന്നു. 10 അക്ഷരങ്ങളുള്ള ഒരു പേര് ടൈപ്പ് ചെയ്യുമ്പോൾ 10 തവണ മുഴുവൻ ഫോമും റെൻഡർ ചെയ്യേണ്ടി വരുന്നു. ഇത് കുറഞ്ഞ ശേഷിയുള്ള (low-end) ഉപകരണങ്ങളിൽ നിങ്ങളുടെ ആപ്പിന്റെ വേഗത കുറയ്ക്കുന്നു.
മാനുവൽ വാലിഡേഷനും (Manual validation) ഒരു പ്രശ്നമാണ്. ഓരോ ഫീൽഡിനും വേണ്ടി "if" സ്റ്റേറ്റ്മെന്റുകൾ എഴുതുന്നത് കുഴപ്പമാണ്. ഇതിൽ TypeScript സേഫ്റ്റി ഇല്ല.
ഇതിനും ഇതിലും മികച്ച ഒരു മാർഗ്ഗം ആവശ്യമാണ്.
ഇത് പരിഹരിക്കാൻ React Hook Form-ഉം Zod-ഉം ഉപയോഗിക്കുക.
React Hook Form, HTML refs വഴി uncontrolled inputs ആണ് ഉപയോഗിക്കുന്നത്. ഡാറ്റ DOM-ൽ തന്നെ നിലനിൽക്കുന്നു. ഒരു എറർ (error) കാണിക്കുന്നത് പോലെ ആവശ്യമുള്ളപ്പോൾ മാത്രം ഫോം വീണ്ടും റെൻഡർ ചെയ്യപ്പെടുന്നു.
Zod നിങ്ങളുടെ വാലിഡേഷൻ കൈകാര്യം ചെയ്യുന്നു. ഇത് നിങ്ങളുടെ ഡാറ്റയുടെ കൃത്യമായ ഘടന (shape) നിർവചിക്കുന്നു.
ഇതിന്റെ വർക്ക്ഫ്ലോ (workflow) ഇതാ:
ഒരു Zod schema നിർവചിക്കുക. ഇത് നിങ്ങളുടെ 'single source of truth' ആയി പ്രവർത്തിക്കുന്നു. ഇത് runtime validation-ഉം TypeScript types-ഉം നൽകുന്നു.
zodResolverഉപയോഗിക്കുക. ഇത് React Hook Form-നെ നിങ്ങളുടെ Zod schema-യുമായി ബന്ധിപ്പിക്കുന്നു.registerഫങ്ക്ഷൻ ഉപയോഗിക്കുക. ഇത് നിരന്തരമായ re-renders ഉണ്ടാക്കാതെ തന്നെ നിങ്ങളുടെ ഇൻപുട്ടുകളെ ഫോമുമായി ബന്ധിപ്പിക്കുന്നു.
ഗുണങ്ങൾ:
- ഇൻപുട്ട് ലാഗ് (input lag) ഉണ്ടാകില്ല. വലിയ ഫോമുകൾ പോലും സുഗമമായി പ്രവർത്തിക്കും.
- Type safety. നിങ്ങളുടെ ഡാറ്റ API പ്രതീക്ഷിക്കുന്ന രീതിയിൽ തന്നെയായിരിക്കും.
- കുറഞ്ഞ കോഡ്. മാനുവൽ വാലിഡേഷൻ ലോജിക് എഴുതേണ്ടി വരുന്നില്ല.
React state-മായി പോരാടുന്നത് നിർത്തുക. പ്രൊഫഷണൽ ഫോമുകൾ നിർമ്മിക്കാൻ refs-ഉം schemas-ഉം ഉപയോഗിക്കുക.
Source: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j