ฟอร์ม React ที่สมบูรณ์แบบ: Zod & React Hook Form

ฟอร์มคือหัวใจสำคัญของผลิตภัณฑ์ B2B SaaS

นักพัฒนาส่วนใหญ่สร้างฟอร์มด้วยวิธีที่ผิด พวกเขาใช้ controlled components ซึ่งหมายความว่าพวกเขาผูกทุก input เข้ากับ useState hook

สิ่งนี้ทำให้เกิดปัญหาด้านประสิทธิภาพ

หากฟอร์มของคุณมี 20 ฟิลด์ การพิมพ์เพียงหนึ่งตัวอักษรจะกระตุ้นให้เกิดการ re-render ทั้งฟอร์ม การพิมพ์ชื่อที่มี 10 ตัวอักษรจะทำให้เกิดการ re-render เต็มรูปแบบถึง 10 ครั้ง ซึ่งจะทำให้แอปของคุณทำงานช้าลงบนอุปกรณ์สเปกต่ำ

การทำ validation ด้วยตัวเองก็เป็นอีกหนึ่งปัญหา การเขียนคำสั่ง "if" สำหรับทุกฟิลด์นั้นดูวุ่นวาย และยังขาดความปลอดภัยของ TypeScript

คุณต้องการวิธีที่ดีกว่านี้

ใช้ React Hook Form และ Zod เพื่อแก้ไขปัญหานี้

React Hook Form ใช้ uncontrolled inputs ผ่าน HTML refs โดยข้อมูลจะถูกเก็บไว้ใน DOM ฟอร์มจะ re-render เฉพาะเมื่อจำเป็นเท่านั้น เช่น เมื่อมีข้อผิดพลาดปรากฏขึ้น

Zod จะจัดการเรื่อง validation ให้คุณ โดยมันจะกำหนดโครงสร้าง (shape) ของข้อมูลที่แน่นอน

นี่คือขั้นตอนการทำงาน:

  1. กำหนด Zod schema ซึ่งจะทำหน้าที่เป็นแหล่งข้อมูลความจริงหนึ่งเดียว (single source of truth) โดยให้ทั้งการทำ runtime validation และ TypeScript types

  2. ใช้ zodResolver เพื่อเชื่อมต่อ React Hook Form เข้ากับ Zod schema ของคุณ

  3. ใช้ฟังก์ชัน register เพื่อเชื่อมต่อ input เข้ากับฟอร์มโดยไม่ทำให้เกิดการ re-render ตลอดเวลา

ประโยชน์ที่จะได้รับ:

  • ไม่มีอาการหน่วงขณะพิมพ์ (Zero input lag) ฟอร์มขนาดใหญ่ยังคงทำงานได้อย่างลื่นไหล
  • มี Type safety ข้อมูลของคุณจะตรงตามความต้องการของ API
  • เขียนโค้ดน้อยลง คุณไม่ต้องเขียน logic สำหรับการทำ validation ด้วยตัวเองอีกต่อไป

เลิกสู้กับ React state แล้วหันมาใช้ refs และ schemas เพื่อสร้างฟอร์มแบบมืออาชีพกันดีกว่า

แหล่งที่มา: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j