𝗕𝘂𝗹𝗹𝗲𝘁𝗽𝗿𝗼𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺𝘀: 𝗭𝗼𝗱 & 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗙𝗼𝗿𝗺
Borang memacu produk B2B SaaS.
Kebanyakan pembangun membina borang dengan cara yang salah. Mereka menggunakan komponen terkawal (controlled components). Ini bermakna mereka mengikat setiap input kepada hook useState.
Ini mewujudkan masalah prestasi.
Jika borang anda mempunyai 20 medan, menaip satu huruf akan mencetuskan render semula (re-render) keseluruhan borang. Menaip nama dengan 10 huruf memaksa 10 kali render semula sepenuhnya. Ini menjadikan aplikasi anda perlahan pada peranti spesifikasi rendah.
Pengesahan manual juga merupakan satu masalah. Menulis pernyataan "if" untuk setiap medan adalah tidak kemas. Ia juga kekurangan keselamatan TypeScript.
Anda memerlukan cara yang lebih baik.
Gunakan React Hook Form dan Zod untuk mengatasi masalah ini.
React Hook Form menggunakan input tidak terkawal (uncontrolled inputs) melalui HTML refs. Data kekal di dalam DOM. Borang hanya akan melakukan render semula apabila perlu, seperti apabila ralat muncul.
Zod mengendalikan pengesahan anda. Ia mentakrifkan bentuk data anda dengan tepat.
Berikut adalah aliran kerja:
Takrifkan skema Zod. Ini bertindak sebagai sumber kebenaran tunggal (single source of truth) anda. Ia menyediakan pengesahan masa larian (runtime validation) dan jenis TypeScript.
Gunakan
zodResolver. Ini menghubungkan React Hook Form kepada skema Zod anda.Gunakan fungsi
register. Ini menghubungkan input anda kepada borang tanpa mencetuskan render semula yang berterusan.
Kelebihannya:
- Sifar lengah input (input lag). Borang yang besar kekal lancar.
- Keselamatan jenis (type safety). Data anda sepadan dengan jangkaan API anda.
- Kurang kod. Anda tidak perlu lagi menulis logik pengesahan secara manual.
Berhenti bergelut dengan state React. Gunakan refs dan skema untuk membina borang yang profesional.
Sumber: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j