| 1 | import * as React from "react"; |
| 2 | |
| 3 | export const useDebounce = <T>(value: T, delay = 500) => { |
| 4 | const [debouncedValue, setDebouncedValue] = React.useState(value); |
| 5 | |
| 6 | React.useEffect(() => { |
| 7 | const handler: NodeJS.Timeout = setTimeout(() => { |
| 8 | setDebouncedValue(value); |
| 9 | }, delay); |
| 10 | |
| 11 | // Cancel the timeout if value changes (also on delay change or unmount) |
| 12 | return () => { |
| 13 | clearTimeout(handler); |
| 14 | }; |
| 15 | }, [value, delay]); |
| 16 | |
| 17 | return debouncedValue; |
| 18 | }; |
| 19 |