useDebounce
입력값을 지정한 시간 동안 변경되지 않을 때만 업데이트하는 커스텀 훅ReactTypescript
예시
실제 값: -
디바운스된 값: -
500ms 동안 입력이 없으면 값이 업데이트됩니다.
API
useDebounce<T>()- Parameters
- callback ((...args: Args) => Return)디바운스할 콜백 함수
- delay (number)실행을 지연할 시간(ms)
- Returns
- (...args: Args) => void (function)디바운스된 함수. 이 함수는 원본 함수와 동일한 매개변수를 받지만, delay 시간 동안 호출이 없을 때만 실행됩니다.
개발 및 사용환경
ReactTypescript사용법
1// 기본 사용
2const [value, setValue] = useState("");
3const [debouncedValue, setDebouncedValue] = useState(value);
4
5const handleChange = useDebounce((newValue: string) => {
6 setDebouncedValue(newValue);
7}, 500);
8
9useEffect(() => {
10 handleChange(value);
11}, [value, handleChange]);
12
13// 검색 API 호출
14const handleSearch = useDebounce((searchTerm: string) => {
15 searchAPI(searchTerm);
16}, 500);
17
18// 입력 필드
19<input
20 type="text"
21 onChange={(e) => handleSearch(e.target.value)}
22/>Hook
1import { useCallback, useRef } from "react";
2
3/**
4 * 콜백 함수를 지정한 시간 동안 호출되지 않을 때만 실행하는 Hook
5 *
6 * 이 훅은 연속된 함수 호출을 하나로 묶어 성능을 최적화합니다.
7 * 예를 들어, 사용자 입력이나 검색 API 호출과 같이 연속적인 이벤트를 처리할 때 유용합니다.
8 *
9 * @param callback - 디바운스할 콜백 함수
10 * @param delay - 실행을 지연할 시간(ms)
11 * - 0 이하: 경고 메시지 출력 후 즉시 실행
12 * - 양수: 지정된 시간 동안 호출이 없을 때만 실행
13 *
14 * @returns 디바운스된 함수. 이 함수는 원본 함수와 동일한 매개변수를 받지만,
15 * delay 시간 동안 호출이 없을 때만 실행됩니다.
16 */
17export function useDebounce<Args extends unknown[], Return>(
18 callback: (...args: Args) => Return,
19 delay: number
20): (...args: Args) => void {
21 const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
22
23 return useCallback(
24 (...args: Args) => {
25 if (delay <= 0) {
26 console.warn("useDebounce: delay must be a positive number");
27 callback(...args);
28 return;
29 }
30
31 if (timeoutRef.current) {
32 clearTimeout(timeoutRef.current);
33 }
34
35 timeoutRef.current = setTimeout(() => {
36 callback(...args);
37 }, delay);
38 },
39 [callback, delay]
40 );
41}