Kỹ thuật debounce là một kỹ thuật trong lập trình giúp loại bỏ các sự kiện lặp lại nhiều lần trong một khoảng thời gian ngắn, đặc biệt là khi xử lý các sự kiện tương tác với người dùng như gõ phím, nhấp chuột, hoặc các tín hiệu tương tự. Trong khoản thời gian đợi, mọi tác động sẽ đều bị bỏ qua và chỉ nhận duy nhất 1 hành động diễn ra trong thời gian chúng ta định trước.
Trong React, chúng ta có thể ứng dụng kỹ thuật debounce thông qua ví dụ sau:
Giả sử chúng ta muốn làm chức năng tìm kiếm dạng autocomplete, chúng ta sẽ dựa vào sự kiện onchange của ô input để gửi request tìm kiếm dựa vào nội dung trong ô input. Nhưng vấn đề là request sẽ gửi liên tục mỗi khi chúng ta gõ 1 kí tự vào ô input. Thay vì đó, ta có thể sử dụng kỹ thuật debounce trong React để gửi request sau khi người dùng ngừng gõ trong một khoảng thời gian.
Code debouce trong React như sau:
P/s: Bạn có thể xem demo kỹ thuật debounce ở thanh tìm kiếm của website này! :D
