𝗕𝘂𝗹𝗹𝗲𝘁𝗽𝗿𝗼𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺𝘀: 𝗭𝗼𝗱 & 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗙𝗼𝗿𝗺
Forms B2B SaaS ਉਤਪਾਦਾਂ ਨੂੰ ਚਲਾਉਂਦੇ ਹਨ।
ਜ਼ਿਆਦਾਤਰ ਡਿਵੈਲਪਰ ਫਾਰਮਾਂ ਨੂੰ ਗਲਤ ਤਰੀਕੇ ਨਾਲ ਬਣਾਉਂਦੇ ਹਨ। ਉਹ controlled components ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਉਹ ਹਰ input ਨੂੰ useState hook ਨਾਲ ਬੰਨ੍ਹਦੇ ਹਨ।
ਇਸ ਨਾਲ ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੁੰਦੀਆਂ ਹਨ।
ਜੇਕਰ ਤੁਹਾਡੇ ਫਾਰਮ ਵਿੱਚ 20 ਫੀਲਡ ਹਨ, ਤਾਂ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਨ ਨਾਲ ਪੂਰੇ ਫਾਰਮ ਦਾ re-render ਹੋ ਜਾਂਦਾ ਹੈ। 10 ਅੱਖਰਾਂ ਵਾਲਾ ਨਾਮ ਟਾਈਪ ਕਰਨ ਨਾਲ 10 ਵਾਰ ਪੂਰਾ re-render ਹੁੰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਘੱਟ ਸਮਰੱਥਤਾ ਵਾਲੇ (low-end) ਡਿਵਾਈਸਾਂ 'ਤੇ ਹੌਲੀ ਕਰ ਦਿੰਦਾ ਹੈ।
ਮੈਨੂਅਲ ਵੈਲੀਡੇਸ਼ਨ (Manual validation) ਵੀ ਇੱਕ ਸਮੱਸਿਆ ਹੈ। ਹਰ ਫੀਲਡ ਲਈ "if" ਸਟੇਟਮੈਂਟਾਂ ਲਿਖਣਾ ਬਹੁਤ ਉਲਝਣ ਵਾਲਾ ਹੈ। ਇਸ ਵਿੱਚ TypeScript ਸੁਰੱਖਿਆ ਦੀ ਕਮੀ ਹੁੰਦੀ ਹੈ।
ਤੁਹਾਨੂੰ ਇੱਕ ਬਿਹਤਰ ਤਰੀਕੇ ਦੀ ਲੋੜ ਹੈ।
ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ React Hook Form ਅਤੇ Zod ਦੀ ਵਰਤੋਂ ਕਰੋ।
React Hook Form HTML refs ਰਾਹੀਂ uncontrolled inputs ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਡਾਟਾ DOM ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ। ਫਾਰਮ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ re-render ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਲੋੜ ਹੋਵੇ, ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਕੋਈ ਗਲਤੀ (error) ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ।
Zod ਤੁਹਾਡੀ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਡਾਟਾ ਦੇ ਸਹੀ ਰੂਪ (shape) ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।
ਇੱਥੇ ਵਰਕਫਲੋ (workflow) ਦਿੱਤਾ ਗਿਆ ਹੈ:
ਇੱਕ Zod schema ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ single source of truth ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ runtime validation ਅਤੇ TypeScript types ਦੋਵੇਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
zodResolverਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ React Hook Form ਨੂੰ ਤੁਹਾਡੇ Zod schema ਨਾਲ ਜੋੜਦਾ ਹੈ।registerfunction ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਲਗਾਤਾਰ re-renders ਨੂੰ ਟ੍ਰਿਗਰ ਕੀਤੇ ਬਿਨਾਂ ਤੁਹਾਡੇ inputs ਨੂੰ ਫਾਰਮ ਨਾਲ ਜੋੜਦਾ ਹੈ।
ਫਾਇਦੇ:
- ਜ਼ੀਰੋ input lag। ਵੱਡੇ ਫਾਰਮ ਸੁਚਾਰੂ ਰਹਿੰਦੇ ਹਨ।
- Type safety। ਤੁਹਾਡਾ ਡਾਟਾ ਤੁਹਾਡੀਆਂ API ਉਮੀਦਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।
- ਘੱਟ ਕੋਡ। ਤੁਸੀਂ ਮੈਨੂਅਲ ਵੈਲੀਡੇਸ਼ਨ ਲੌਜਿਕ ਲਿਖਣਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹੋ।
React state ਨਾਲ ਲੜਨਾ ਬੰਦ ਕਰੋ। ਪੇਸ਼ੇਵਰ ਫਾਰਮ ਬਣਾਉਣ ਲਈ refs ਅਤੇ schemas ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਸਰੋਤ: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j