બુલેટપ્રૂફ React Forms: Zod & React Hook Form
Forms એ B2B SaaS પ્રોડક્ટ્સનું મુખ્ય કેન્દ્ર છે.
મોટાભાગના ડેવલપર્સ ખોટી રીતે forms બનાવે છે. તેઓ controlled components નો ઉપયોગ કરે છે. આનો અર્થ એ છે કે તેઓ દરેક input ને useState hook સાથે bind કરે છે.
આનાથી performance ની સમસ્યાઓ ઊભી થાય છે.
જો તમારા form માં 20 fields હોય, તો એક અક્ષર ટાઈપ કરવાથી આખા form નું re-render થાય છે. 10 અક્ષરોવાળું નામ ટાઈપ કરવાથી 10 વખત આખું re-render થાય છે. આના કારણે તમારા low-end ઉપકરણો પર તમારી એપ ધીમી પડી જાય છે.
Manual validation પણ એક સમસ્યા છે. દરેક field માટે "if" statements લખવા અસ્તવ્યસ્ત લાગે છે. તેમાં TypeScript safety નો અભાવ હોય છે.
તમારે વધુ સારી રીતની જરૂર છે.
આ સમસ્યાના ઉકેલ માટે React Hook Form અને Zod નો ઉપયોગ કરો.
React Hook Form HTML refs દ્વારા uncontrolled inputs નો ઉપયોગ કરે છે. ડેટા DOM માં રહે છે. Form ત્યારે જ re-render થાય છે જ્યારે જરૂર હોય, જેમ કે જ્યારે કોઈ error દેખાય.
Zod તમારા validation ને હેન્ડલ કરે છે. તે તમારા ડેટાનું ચોક્કસ સ્વરૂપ (shape) વ્યાખ્યાયિત કરે છે.
અહીં વર્કફ્લો (workflow) છે:
Zod schema વ્યાખ્યાયિત કરો. તે તમારા single source of truth તરીકે કામ કરે છે. તે runtime validation અને TypeScript types બંને પ્રદાન કરે છે.
zodResolverનો ઉપયોગ કરો. આ React Hook Form ને તમારા Zod schema સાથે જોડે છે.registerfunction નો ઉપયોગ કરો. આ સતત re-renders કર્યા વગર તમારા inputs ને form સાથે જોડે છે.
ફાયદાઓ:
- Zero input lag. મોટા forms પણ સ્મૂધ રહે છે.
- Type safety. તમારો ડેટા તમારી API અપેક્ષાઓ સાથે મેળ ખાય છે.
- ઓછો કોડ. તમારે manual validation logic લખવાની જરૂર રહેતી નથી.
React state સાથે લડવાનું બંધ કરો. પ્રોફેશનલ forms બનાવવા માટે refs અને schemas નો ઉપયોગ કરો.
Source: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j