useDebounce

Hook useDebounce trì hoãn việc cập nhật giá trị trạng thái cho đến khi một khoảng thời gian nhất định đã trôi qua kể từ lần cuối cùng giá trị được thiết lập. Điều này hữu ích cho các tình huống bạn muốn giới hạn tốc độ gọi hàm, chẳng hạn khi xử lý đầu vào của người dùng.

Tham sô

• value (T): Giá trị cần được debounce.
• delay (số): Thời gian trì hoãn tính bằng mili giây.

Giá trị trả về

T: Giá trị đã được debounce, chỉ được cập nhật sau khoảng thời gian đã chỉ định.

Ví dụ

import React, { useState } from 'react';
import { useDebounce } from './useDebounce';

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 300);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // Lấy kết quả tìm kiếm hoặc thực hiện một hành động
      console.log('Đang lấy dữ liệu cho:', debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Tìm kiếm..."
      />
      <p>Đang tìm kiếm: {debouncedSearchTerm}</p>
    </div>
  );
}

export default App;

Ghi chú*

• Hook useDebounce đặc biệt hữu ích trong các tình huống như nhập liệu tìm kiếm, khi bạn muốn chờ người dùng ngừng gõ trước khi thực hiện yêu cầu.
• Thời gian trì hoãn nên được chọn dựa trên trường hợp sử dụng cụ thể để cân bằng giữa khả năng phản hồi và hiệu suất.