・Debouncing is useful for costly processes such as API calls or search queries, which you don't want to perform with every keystroke.
import { useState, useEffect } from "react";
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timeout = setTimeout(() => setDebouncedValue(value), delay);
return () => {
clearTimeout(timeout);
};
}, [value, delay]);
return debouncedValue;
}
function App() {
const [searchTerm, setSearchTerm] = useState("");
const debouncedSearchTerm = useDebounce(searchTerm, 500);
useEffect(() => {
}, [debouncedSearchTerm]);
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<p>Search term: {searchTerm}</p>
<p>Debounced search term: {debouncedSearchTerm}</p>
</div>
);
}
export default App;