ทำไมการปิดปุ่มกดส่งฟอร์มถึงไม่เคยพอเรียนรู้จาก React 19 useActionState
เจาะลึกปัญหาการส่งฟอร์มซ้ำซ้อนและการจัดการสถานะด้วย React 19 useActionState พร้อมเผยพฤติกรรมการต่อคิว action ที่นักพัฒนาหลายคนเข้าใจผิด
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การใช้ useState สามตัวจัดการฟอร์มแบบเดิมมักเสี่ยงต่อการลืมรีเซ็ตสถานะ
- React 19 useActionState จะคิวและรัน action แบบเรียงลำดับทีละตัวไม่เกิดการแข่งกัน
- การปิดปุ่มด้วย isPending ช่วยหยุดผู้ใช้ไม่ให้กดคิวคำขอรัวๆ โดยไม่จำเป็น
- การจัดการข้อผิดพลาดในคิวมีความสำคัญมากเพราะหากเกิด error คิวที่เหลือจะถูกข้าม
ก่อนหน้าที่จะมี React 19 การสร้างฟอร์มแต่ละครั้งมักจะต้องเขียนชุดสถานะสามตัวด้วยมือเสมอ ได้แก่ สถานะผลลัพธ์ สถานะกำลังส่ง และสถานะข้อผิดพลาด ซึ่งในหนึ่งสปินต์นักพัฒนาส่วนใหญ่มักจะเผลอลืมรีเซ็ตสถานะสักตัวจนต้องมานั่งมองปุ่มที่ไม่ยอมเปิดใช้งานใหม่อยู่บ่อยๆ รูปแบบการเขียนโค้ดแบบเดิมที่คุ้นเคยนี้มักถูกนำมาใช้งานซ้ำๆ ในหลายคอมโพเนนต์โดยไม่ได้เฉลียวใจเลยว่ามันมีปัญหาแอบแฝงอยู่
จนกระทั่งได้ลองใช้งาน useActionState อย่างจริงจังถึงได้ตระหนักว่าวิธีแก้ปัญหาการกดส่งซ้ำแบบเดิมที่เคยทำมาตลอดนั้นไม่ได้ช่วยแก้ปัญหาอะไรเลย สิ่งที่เรามักทำกันคือการเพิ่มโค้ดป้องกันการกดซ้ำในรูปแบบต่างๆ แต่เมื่อเปลี่ยนมาใช้ฮุกตัวนี้ ความรู้สึกที่มองว่าเป็นเพียงฮุกธรรมดาๆ ตัวหนึ่งก็เปลี่ยนไปราวกับว่า React กำลังยอมรับทางอ้อมว่าพวกเขาได้เฝ้ามองนักพัฒนาเขียนโค้ดส่วนนี้ผิดพลาดมานานจนกระทั่งยอมสร้างวิธีแก้ที่ถูกต้องออกมาให้เสียที
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
โครงสร้างการใช้งานประกอบด้วย:
- รับฟังก์ชันและสถานะเริ่มต้นเป็นอาร์กิวเมนต์
- React จะเรียกใช้ฟังก์ชันนั้นเมื่อมีการส่งฟอร์มด้วย
(previousState, formData) - ค่าที่ส่งกลับจะกลายเป็นสถานะใหม่โดยอัตโนมัติ
isPendingจะเชื่อมโยงกับการติดตามทรานซิชันของ React โดยตรง
การทำความเข้าใจฮุกจัดการฟอร์มใหม่ใน React 19 ถือเป็นก้าวสำคัญสำหรับนักพัฒนาフロントend ที่ต้องการลด Boilerplate code แต่สิ่งสำคัญคือต้องตระหนักว่าเครื่องมือฝั่งไคลเอนต์เหล่านี้ช่วยยبردประสบการณ์ใช้งานให้ราบรื่นขึ้นเท่านั้น ความปลอดภัยในระดับสถาปัตยกรรม เช่น การทำ Idempotency key ที่ฝั่งแบ็กเอนด์ยังคงเป็นสิ่งจำเป็นสำหรับธุรกรรมสำคัญที่ไม่ควรถูกประมวลผลซ้ำ
ในตอนแรกหลายคนอาจคาดว่าการคลิกรัวๆ จะทำให้เกิดการแย่งชิงจังหวะกันทำงานหรือที่เรียกว่า Race condition แต่วินัยการทำงานของ useActionState ไม่ได้เป็นเช่นนั้น โดย React จะจัดคิวการเรียกใช้งานฟังก์ชัน action ทั้งหมดและรันตามลำดับทีละตัว ซึ่งแต่ละตัวจะรอให้อันก่อนหน้าทำงานเสร็จสิ้นเสียก่อน ดังนั้นการกดปุ่ม Add to Cart รัวๆ สี่ครั้งจะใช้เวลาทำงานนานขึ้นสี่เท่าตามลำดับโดยไม่มีคำขอไหนถูกทิ้งหรือเกิดการชนกันแต่อย่างใด
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น