react-usekit

Beta

useDebounceValue

A custom hook that debounces a value.

Installation

npx react-usekit@latest init

Select: hooks → TypeScript or JavaScript → path -> useDebounceValue

Usage

import { useDebounceValue } from "./hooks/useDebounceValue";
import { useState } from "react";

function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounceValue(searchTerm, 500);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>Current: {searchTerm}</p>
      <p>Debounced: {debouncedSearchTerm}</p>
    </div>
  );
}

API

Parameters

ParameterTypeDescription
valueTThe value to debounce
delaynumberThe debounce delay in milliseconds

Returns

TypeDescription
TThe debounced value