34 lines
581 B
TypeScript
34 lines
581 B
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
const DebouncedInput = ({
|
|
value: initialValue,
|
|
onChange,
|
|
debounce = 500,
|
|
...props
|
|
}) => {
|
|
const [value, setValue] = useState(initialValue);
|
|
|
|
useEffect(() => {
|
|
setValue(initialValue);
|
|
}, [initialValue]);
|
|
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => {
|
|
onChange(value);
|
|
}, debounce);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}, [value]);
|
|
|
|
return (
|
|
<input
|
|
{...props}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DebouncedInput;
|
|
|