The useDebounce hook allows you to debounce a value for a given delay. It is useful when you want to wait for the user to stop typing before performing an action, such as making an API call or updating a state.
Importation
Make sure you are importing the useDebounce hook from the pol-ui library in your React component.
import { useDebounce } from "pol-ui";Usage
const [value, setValue] = useState < string > "";
const debouncedValue = useDebounce < string > (value, 1000); // Debounce for 1 second
useEffect(() => {
console.log(debouncedValue);
}, [debouncedValue]);Parameters
- value < T >: The value to debounce.
- delay < number > (optional): The delay in milliseconds. Default is 500.
Returns
- debouncedValue < T >: The debounced value.
Example
import React, { useState, useEffect } from "react";
import { useDebounce } from "pol-ui";
const App = () => {
const [value, setValue] = useState < string > "";
const debouncedValue = useDebounce < string > (value, 1000); // Debounce for 1 second
useEffect(() => {
console.log(debouncedValue);
}, [debouncedValue]);
return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Debounce input"
/>
);
};
export default App;