useDebounce

React hook for debouncing a value for a given delay.

Installation

npm install @mvdlei/hooks

Example

Usage

import React, { useState } from "react";
import { useDebounce } from "@mvdlei/hooks";
 
const MyComponent = () => {
  const [inputValue, setInputValue] = useState("");
  const debouncedValue = useDebounce(inputValue, 500);
 
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
 
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
};

Reference

useDebounce<T>(value: T, delay: number | undefined = 500): T;

Parameters

value: The value to debounce.
delay: The delay in milliseconds, defaults to 500.

Return Value

The debounced value.

Links

use-debounce.ts