useDebounce

Returns a debounced value of the provided value.

Source
View package
Coverage
Export size

Installation

Install the custom hook from your command line.

npm i @raddix/use-debounce

Usage

import { useState } from 'react';
import { useDebounce } from '@raddix/use-debounce';

export default function App() {
  const [value, setValue] = useState<string>();
  const debouncedValue = useDebounce(value, 800);

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Typed value"
      />
      <p>DebouncedValue: {debouncedValue}</p>
    </div>
  );
};

API

Parameters

Parameters	Description	Required	Type
value	The value you want to bounce.	Yes	any
delay	The delay time in milliseconds.	No	number

Returns

Returns	Description	Type
debouncedValue	The debounce value. After the delay time has elapsed without the value changing, it will be updated to the most recent value.	any