[React] UseDebounce hook구현

웹 IDE를 만들면서 초대한 사람이 실시간으로 편집하는 코드를 초대된 사람들에게 보이도록 하는 기능을 만들었다. 소켓을 사용하였는데 변화가 있을때마다 통신을 하면 과부하가 올 것 같아서 변화가 있고 1초 후에 통신을 하도록 하였다.

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounceValue(value);
    }, delay);

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

  return debounceValue;
};

value와 delay값을 넣으면 delay 값 만큼 지나면 값이 업데이트가 된다. 만약 사용자가 계속 작성하고 있다면 clearTimeout으로 다시 시간이 리셋된다!