debounce 2

YOUNGJOO-YOON·2022년 3월 22일
0

typeScript

목록 보기
65/65
import { useCallback, useEffect, useState } from 'react';

const useDebounce = ({ func, delay, deps }) => {
  const callback = useCallback(func, deps);

  useEffect(() => {
    const timer = setTimeout(() => {
      callback();
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [callback, delay]);
};

export { useDebounce };
import { useMemo, useState, ChangeEvent, MouseEvent } from 'react';
import { useDebounce } from 'util/hooks/useDebounce';

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!');
  };

  useDebounce({
    func: () => {
      console.log('debounce????');
    },
    delay: 1000,
    deps: [second],
  });

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

export default About;
profile
이 블로그의 글은 제 생각을 정리한 글과 인터넷 어딘가에서 배운 것을 정리한 글입니다. 출처는 되도록 남기도록 하겠습니다. 수정 및 건의 오류 등이 있으면 언제든지 댓글 부탁드립니다.

0개의 댓글