అత్యంత నమ్మదగిన React Forms: Zod & React Hook Form
ఫారమ్లు B2B SaaS ఉత్పత్తులను నడిపిస్తాయి.
చాలా మంది డెవలపర్లు ఫారమ్లను తప్పు పద్ధతిలో నిర్మిస్తారు. వారు controlled components ఉపయోగిస్తారు. అంటే ప్రతి input ను ఒక useState hook కి బైండ్ చేస్తారు.
ఇది పెర్ఫార్మెన్స్ సమస్యలకు దారితీస్తుంది.
మీ ఫారమ్లో 20 ఫీల్డ్లు ఉంటే, మీరు ఒక అక్షరం టైప్ చేసినా మొత్తం ఫారమ్ re-render అవుతుంది. 10 అక్షరాలు ఉన్న పేరును టైప్ చేస్తే, 10 సార్లు పూర్తి re-renders జరుగుతాయి. దీనివల్ల తక్కువ సామర్థ్యం ఉన్న పరికరాలలో (low-end devices) మీ యాప్ నెమ్మదిగా మారుతుంది.
మాన్యువల్ వాలిడేషన్ (Manual validation) కూడా ఒక సమస్య. ప్రతి ఫీల్డ్ కోసం "if" స్టేట్మెంట్లను రాయడం గందరగోళంగా ఉంటుంది. దీనివల్ల TypeScript safety లోపించింది.
మీకు దీనికి మెరుగైన మార్గం కావాలి.
దీనిని పరిష్కరించడానికి React Hook Form మరియు Zod ఉపయోగించండి.
React Hook Form అనేది HTML refs ద్వారా uncontrolled inputs ను ఉపయోగిస్తుంది. డేటా DOM లోనే ఉంటుంది. ఏదైనా ఎర్రర్ వచ్చినప్పుడు మాత్రమే ఫారమ్ re-render అవుతుంది.
Zod మీ వాలిడేషన్ను నిర్వహిస్తుంది. ఇది మీ డేటా యొక్క ఖచ్చితమైన రూపాన్ని (shape) నిర్వచిస్తుంది.
దీని వర్క్ఫ్లో (workflow) ఇక్కడ ఉంది:
Zod schema ను నిర్వచించండి. ఇది మీ single source of truth గా పనిచేస్తుంది. ఇది runtime validation మరియు TypeScript types రెండింటినీ అందిస్తుంది.
zodResolver ను ఉపయోగించండి. ఇది React Hook Form ను మీ Zod schema తో కలుపుతుంది.
register function ను ఉపయోగించండి. ఇది నిరంతర re-renders ని కలిగించకుండా మీ inputs ను ఫారమ్తో కలుపుతుంది.
ప్రయోజనాలు:
- ఇన్పుట్ లాగ్ (input lag) ఉండదు. పెద్ద ఫారమ్లు కూడా స్మూత్గా పనిచేస్తాయి.
- Type safety. మీ డేటా మీ API అంచనాలకు అనుగుణంగా ఉంటుంది.
- తక్కువ కోడ్. మీరు మాన్యువల్ వాలిడేషన్ లాజిక్ను రాయాల్సిన అవసరం ఉండదు.
React state తో పోరాడటం ఆపండి. ప్రొఫెషనల్ ఫారమ్లను నిర్మించడానికి refs మరియు schemas ఉపయోగించండి.
మూలం: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j