react debounce

const About = () => {
  const [second, setSecond] = useState<string>('');
  const [timer, setTimer] = useState<any>(0);
  const handleOnChangeSecond = (e: ChangeEvent<HTMLInputElement>) => {
    setSecond(e.target.value as string);
    if (timer) {
      console.log('clear', timer);
      clearTimeout(timer);
    }
    const newTimer = setTimeout(() => {
      console.log('hi!', e.target.value);
    }, 800);
    setTimer(newTimer);
    return;
  };
  const handleNormalOne = () => {
    console.log('hi!');
  };

  return (
    <div role="heading">
      <div>
        <h2>second</h2>
        <h4>{second}</h4>
      </div>
      <input onChange={handleOnChangeSecond} />
      <input onChange={handleNormalOne} />
    </div>
  );
};

export default About;

기본적인 아이디어는 호출이 많은 함수에 대해
마지막 함수만을 실행시켜주는 것이다.

여러함수가 (1)=> (2)=> (3)=> ...
이런식으로 실행 요청이 들어왔다고 가정하면

마지막 (3)=> 함수만 실행해주는 것이다.

이런걸 어떻게 가능하게 하는가?

timer를 사용하는 것이다.

setTimeout의 callback 함수로써 원하는 함수를 받고
그 함수의 실행 시간을 ms으로 정해놓자.

아 물론 많은 요청들이 쌓일 함수들의 삭제를 담당할 clearTimeout으로 요청이 있다면 삭제하고 새 요청을 쑤셔넣어준다.

따라서 요청 1은 요청 2에 의해 삭제되고 2는 3에 의해 삭제된다.

요청 3은 요청 4가 없는 경우 800ms 이후에 발동한다.