함수 호출 이후 일정 시간이 지나기전에 다시 호출되지 않음을 보장하는것
// 스크롤 액션에서 과도한 리랜더링을 피하고자할때 적합
이론적으로, 사용자가 입력을 멈춘 후 300밀리초 후에 실행되어야 합니다.
그러나 이 구현은 작동하지 않습니다. 검색 기능은 호출되지 않습니다. 😕
사용자가 문자를 입력할 때 debounce 기능이 손실되고, onChange 기능이 다시 호출되기 때문에 작동하지 않습니다.
async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
debounce(async () => {
// 😕 이렇게쓰면 작동하지 않음
setCharacters(await search(e.target.value));
}, 300);
}
const debouncedSearch = debounce(async (criteria) => {
setCharacters(await search(criteria));
}, 300);
async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
debouncedSearch(e.target.value);
}
const debouncedSearch = React.useRef(
debounce(async (criteria) => {
setCharacters(await search(criteria));
}, 300)
).current;
컴포넌트가 마운트 해제될 때 debouncedSearch 요청이 계속 진행 중일 수 있습니다. 이 경우 side effect가 발생합니다.
이 문제를 해결하기 위해 useEffect hook을 사용하여 함수를 취소할 수 있습니다.
React.useEffect(() => {
return () => {
debouncedSearch.cancel();
};
}, [debouncedSearch]);