Debounce In UseEffect

Debounce

는 이벤트 핸들러의 과도한 횟수가 발생하는 경우를 효과적으로 제어하여 성능의 개선을 목표로 하는 프로그래밍 기법으로, 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기법이다. 해당 프로젝트에서는 검색 페이지에서 키워드 입력 시, 키워드 입력 완료 후 특정 시간 이후 API를 요청하도록 적용하였다.

 

🗒️ 적용 전 코드

• 키워드를 담을 state를 선언해 주고 input에 onChange 이벤트를 적용한다
• 의존성 배열에 keyword를 전달해서 keyword의 값이 변동될 때마다 api를 요청한다

const [keyword, setKeyword] = useState<string>('');

useEffect(() => {
		// api call
    searchFeedList(keyword, setFeedList);
  }, [keyword]);

 

🗒️ 적용 후 코드

• setTimeout을 통해 delay(500) 이후에 debouncedKeyword를 얻는다.
• debouncedKeyword가 변동될 때마다 api를 요청한다.

  const [keyword, setKeyword] = useState<string>('');
  const [debouncedKeyword, setDebouncedKeyword] = useState<string>('');

  useEffect(() => {
    const timer = setTimeout(() => {
      return setDebouncedKeyword(keyword);
    }, 500);
    return () => {
      clearTimeout(timer);
    };
  }, [keyword]);

  useEffect(() => {
    searchFeedList(keyword, setFeedList);
  }, [debouncedKeyword]);

 

🗒️ 적용 전후 비교