debounce-for-react
v1.0.2
Published
A simple and lightweight React hook for debouncing values. Ideal for optimizing performance in search fields, input handling, and other scenarios where you want to limit the rate of updates.
Downloads
28
Maintainers
Readme
react-use-debounce
A simple react hook for debouncing an input with state variables in react.
Installation
npm i debounce-for-react
Usage
import React, { useState } from "react";
import { useDebounce } from "debounce-for-react";
function ExampleComponent() {
const [value, setValue] = useState("");
const debouncedValue = useDebounce(value, 500);
useEffect(() => {
// Use debouncedValue for API calls or other effects
}, [debouncedValue]);
return (
<div>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type something..."
/>
<p>Debounced Value: {debouncedValue}</p>
</div>
);
}