การสร้างฮุกกำหนดเอง useDebounce

ฮุก useDebounce รับค่าและระยะหน่วงเป็นมิลลิวินาที แล้วคืนค่าที่ผ่านดีบาวซ์: function useDebounce(value, delay) ค่า debouncedValue ที่คืนมาจะตามหลังค่าจริง โดยอัปเดตเฉพาะเมื่อพ้นระยะหน่วงที่กำหนดแล้วและไม่มีการเปลี่ยนแปลงเพิ่มเติม

ภายในฮุก ให้ประกาศตัวแปรสถานะดังนี้: const [debouncedValue, setDebouncedValue] = useState(value) สถานะนี้เก็บค่าที่ได้รับการยืนยันล่าสุด โดยเริ่มต้นเท่ากับค่าเริ่มต้นและอัปเดตเฉพาะหลังจากตัวจับเวลาดีบาวซ์ทำงาน คอมโพเนนต์ที่อ่านค่า debouncedValue จะเห็นค่าป้อนเข้าที่คงที่และหยุดนิ่งแล้ว

ตรรกะหลักอยู่ใน useEffect ให้สร้างตัวจับเวลาด้วย setTimeout(() => setDebouncedValue(value), delay) และเก็บ ID ไว้ เอฟเฟกต์จะทำงานทุกครั้งที่ค่าหรือระยะหน่วงเปลี่ยน ตัวจับเวลาจะทำงานหลังจากการเปลี่ยนแปลงครั้งล่าสุดครบระยะหน่วงมิลลิวินาที และอัปเดตสถานะที่ผ่านดีบาวซ์

ฟังก์ชันล้างข้อมูลของ useEffect จะเรียกใช้ clearTimeout(timerId) เมื่อค่าป้อนเข้าเปลี่ยนก่อนที่ตัวจับเวลาจะทำงาน รีแอ็กต์จะเรียกใช้ฟังก์ชันล้างข้อมูลเพื่อยกเลิกการอัปเดตที่รอดำเนินการ จากนั้นจึงตั้งตัวจับเวลาใหม่ กลไกนี้เป็นหัวใจสำคัญที่ทำให้ดีบาวซ์ทำงานได้: การเปลี่ยนแปลงอย่างรวดเร็วจะรีเซ็ตตัวจับเวลาอยู่เสมอ

อาร์เรย์การพึ่งพาของ useEffect ควรมี [value, delay] เอฟเฟกต์จะทำงานซ้ำทุกครั้งที่ค่าป้อนเข้าเปลี่ยน (จึงตั้งตัวจับเวลาใหม่) และทุกครั้งที่ระยะหน่วงเปลี่ยน (ในกรณีที่ผู้เรียกปรับช่วงเวลาดีบาวซ์แบบไดนามิก) ต้องใส่ทั้งสองรายการเพื่อหลีกเลี่ยงปัญหาคลอเชอร์ที่เป็นค่าล้าสมัย

การใช้งานทำได้ง่าย: const debouncedSearch = useDebounce(searchInput, 300) จากนั้น useEffect แยกต่างหากที่มี [debouncedSearch] เป็นรายการพึ่งพาจะส่งคำขอไปยังเซิร์ฟเวอร์ สถานะช่องป้อนข้อมูล (searchInput) อัปเดตทันที ทำให้ช่องป้อนข้อมูลตอบสนองได้ดี ส่วนคำขอไปยังเซิร์ฟเวอร์เท่านั้นที่รอการทำงานของดีบาวซ์

โดยค่าเริ่มต้น การนำไปใช้มาตรฐานจะทำงานเฉพาะที่ขอบท้าย หากต้องการโหมด "ทำงานทันที" ที่เรียกใช้ฟังก์ชันเมื่อถูกกระตุ้นครั้งแรก แต่ใช้ดีบาวซ์กับการเรียกครั้งถัดไป คุณต้องใช้การอ้างอิงเพื่อติดตามว่าเรียกใช้แล้วหรือไม่ และรีเซ็ตหลังจากหมดเวลา วิธีนี้ซับซ้อนกว่า แต่มีประโยชน์สำหรับปุ่มส่งแบบฟอร์ม

ทำให้ฮุกเป็นชนิดทั่วไปเพื่อความปลอดภัยด้านชนิดข้อมูล: function useDebounce(value: T, delay: number): T วิธีนี้ทำให้ TypeScript อนุมานชนิดของ debouncedValue จากชนิดของ value ได้ พารามิเตอร์ชนิดทั่วไป T จะถูกส่งต่อผ่านสถานะภายในและชนิดค่าที่คืนมาโดยอัตโนมัติ

ข้อผิดพลาดที่พบบ่อยคือการลืมคืนค่าฟังก์ชันล้างข้อมูลจาก useEffect หากไม่มีการล้างข้อมูล การเปลี่ยนแปลงค่าทุกครั้งจะสร้างตัวจับเวลาใหม่แต่ไม่เคยยกเลิกตัวเก่า ผลคือตัวจับเวลาหลายตัวทำงาน ทำให้มีการเรียกใช้ setDebouncedValue หลายครั้งด้วยค่าที่ล้าสมัย และทำให้ดีบาวซ์ไม่ทำงานเลย

อีกทางเลือกหนึ่งคือเก็บฟังก์ชันดีบาวซ์ไว้ใน useRef โดยใช้ไลบรารีโลแดช ต่างจากแนวทางที่ใช้สถานะ แนวทางที่ใช้การอ้างอิงจะทำดีบาวซ์กับฟังก์ชันเรียกกลับแทนที่จะทำกับค่า ใช้ฮุกที่อิงสถานะเมื่อคุณต้องการค่าที่คำนวณต่อมา และใช้แนวทางฟังก์ชันเรียกกลับเมื่อคุณต้องการทำดีบาวซ์กับตัวจัดการเหตุการณ์

ตรวจสอบว่าฮุกทำงานได้โดยเพิ่มการบันทึกลงคอนโซลภายในฟังก์ชันเรียกกลับของตัวจับเวลา แล้วดูคอนโซลของเบราว์เซอร์ขณะพิมพ์อย่างรวดเร็ว คุณควรเห็นการบันทึกหนึ่งรายการต่อเหตุการณ์หยุดพิมพ์ ไม่ใช่หนึ่งรายการต่อการกดแป้น จำนวนการบันทึกควรน้อยกว่าจำนวนครั้งที่กดแป้นมากเมื่อพิมพ์อย่างรวดเร็ว

เหตุใด useEffect ใน useDebounce จึงต้องคืนค่าฟังก์ชันล้างข้อมูลที่เรียกใช้ clearTimeout

ฮุก useDebounce(value, delay) เก็บสถานะที่ผ่านดีบาวซ์ ซึ่งจะอัปเดตหลังจากไม่มีเหตุการณ์เป็นเวลา delay มิลลิวินาทีเท่านั้น ฟังก์ชัน useEffect ของฮุกจะตั้งตัวจับเวลาและล้างตัวจับเวลาในฟังก์ชันล้างข้อมูลเพื่อยกเลิกตัวจับเวลาที่ล้าสมัย ใช้ค่าที่ผ่านดีบาวซ์เป็นรายการพึ่งพาสำหรับเอฟเฟกต์ที่ดึงข้อมูลจากเซิร์ฟเวอร์ เพิ่มชนิดทั่วไปของ TypeScript เพื่อความปลอดภัยด้านชนิดข้อมูลอย่างสมบูรณ์