| 3719 |
stevensc |
1 |
import { useState, useEffect, useCallback } from 'react';
|
|
|
2 |
import { useSearchParams } from 'react-router-dom';
|
|
|
3 |
|
|
|
4 |
export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
|
|
|
5 |
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
6 |
|
|
|
7 |
const getQueryFromUrl = useCallback(() => {
|
|
|
8 |
return searchParams.get(paramName);
|
|
|
9 |
}, [searchParams, paramName]);
|
|
|
10 |
|
|
|
11 |
const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
|
|
|
12 |
const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');
|
|
|
13 |
|
|
|
14 |
useEffect(() => {
|
|
|
15 |
const handler = setTimeout(() => {
|
|
|
16 |
setDebouncedValue(inputValue);
|
|
|
17 |
}, debounceDelay);
|
|
|
18 |
|
|
|
19 |
return () => {
|
|
|
20 |
clearTimeout(handler);
|
|
|
21 |
};
|
|
|
22 |
}, [inputValue, debounceDelay]);
|
|
|
23 |
|
|
|
24 |
useEffect(() => {
|
|
|
25 |
setSearchParams((prev) => {
|
|
|
26 |
prev.set(paramName, debouncedValue);
|
|
|
27 |
return prev;
|
|
|
28 |
});
|
|
|
29 |
}, [debouncedValue, paramName, setSearchParams]);
|
|
|
30 |
|
|
|
31 |
return { inputValue, setInputValue, debouncedValue };
|
|
|
32 |
}
|