useDebounce hooks 관련 질문드립니다

따라하며 배우는 리액트 A-Z[19버전 반영]

useDebounce Custom Hooks 만들기

작성

295

useDebounce함수 내에 있는 useEffect구문을

useEffect(() => {}, []); 이 형태로 바꿔주고 해봤습니다.

웹상에서 searchTerm을 입력할때마다 SearchPage가 리랜더링되고, 그 searchPage(index.js)에서 useDebounce를 사용하고 있고, 따라서 useDebounce에 있는 useEffect도 그때마다 재실행될 줄 알았습니다. 근데 아무리 searchTerm을 변경해줘도 useDebounce에 있는 useEffect는 한번만 실행됐습니다. 왜그런건가요? 제가 useEffect에 대해 잘못이해하고 있는거 같습니다만..

react redux tdd typescript Next.js

답변 3

Donkeykong

ㅋㅋ

김창호

질문자

해당 훅을 호출하는 컴포넌트가 unmount될떄 clearTimeout이 실행되는게 맞나요?

John Ahn

지식공유자

안녕하세요!

searchTerm을 바꾸면 바꿀 때마다

만약 useDebounce.js 에 소스코드가

export const useDebounce = (value, delay) => {
  const [debounceValue, setDebounceValue] = useState(value);

  useEffect(() => {
    console.log('triggered!');
    const handler = setTimeout(() => {
      setDebounceValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debounceValue;
};

이런 식으로 되어 있다면 searchTerm을 바꿀 때마다 triggered! 가 log로 출력되게 됩니다.

이렇게 안 나오나요?

인프런 커뮤니티 질문&답변

useDebounce hooks 관련 질문드립니다