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によって削除される.
要求4がなければ、要求3は800 ms後に発動します.