Use Debounce Hook Web

A lightweight, production-ready debounce hook for React applications. Designed to control high-frequency updates, optimize API calls, and improve UI performance.

Install

npm i use-debounce-hook-web

Basic Usage

useDebounce(value, delay)

import { useDebounce } from 'use-debounce-hook-web';
import { useState } from 'react';

const SearchInput = () => {
  const [value, setValue] = useState('');

  const debouncedValue = useDebounce(value, 500);

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Search..."
    />
  );
};

export default SearchInput;

Advanced Usage

useDebounce(value, delay, options)

const debouncedValue = useDebounce(value, 500, {
  immediate: true,
  maxWait: 2000
});

const debouncedValue = useDebounce(value, 500, {
  maxWait: 2000
});

import { useEffect, useState } from "react";
import { useDebounce } from "react-use-debounce";

function SearchUsers() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 500, {
    immediate: true,
    maxWait: 2000
  });

  useEffect(() => {
    if (!debouncedQuery) return;

    fetch(`https://api.example.com/users?q=${debouncedQuery}`)
      .then(res => res.json())
      .then(data => console.log(data));
  }, [debouncedQuery]);

  return (
    <input
      placeholder="Search users..."
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

export default SearchUsers;

Options

| Property | Type | Description | | -------- | ------- | ----------------------------------------- | | value | any | The value to debounce | | delay | number | Debounce delay in milliseconds | | leading | boolean | Execute immediately on first trigger | | maxWait | number | Maximum wait time before forced execution |

More Use Options

| Use Case | immediate | maxWait | | ------------- | --------- | ------- | | Search UX | ✅ Yes | ✅ Yes | | Auto-save | ❌ No | ✅ Yes | | Filtering | ❌ No | ❌ No | | Resize events | ❌ No | ❌ No |