useDebouncedCallback

useDebouncedCallback는 제공된 콜백 함수를 디바운스된 버전으로 반환하는 리액트 훅이에요. 이는 함수 실행을 지연시키고 여러 호출을 하나로 묶어 이벤트 처리를 최적화하는 데 도움이 돼요. 'leading'과 'trailing'이 모두 포함된 경우, 함수는 지연 기간의 시작과 끝에 모두 호출돼요. 하지만 이렇게 동작하려면 디바운스 밀리초(ms) 내에 최소 두 번 호출되어야 해요, 한 번의 디바운스된 함수 호출로 함수가 두 번 호출되지 않아요.

인터페이스

function useDebouncedCallback<T>(options: Object): (nextValue: T) => void;

파라미터

• optionsrequired · Object
  

  옵션 객체예요.

  • options.onChangerequired · (newValue: T) => void
    

    디바운스할 콜백이에요. 마지막으로 전달된 값과 같은 값으로 호출하면 건너뛰어요.

  • options.timeThresholdrequired · number
    

    함수 실행을 지연할 밀리초(ms)이에요.

  • options.leadingboolean · false
    

    만약 true이면, 함수는 시퀀스의 시작에 호출돼요.

  • options.trailingboolean · true
    

    만약 true이면, 함수는 시퀀스의 끝에 호출돼요.

반환 값

• (nextValue: T) => void
  

  값을 onChange에 전달하는 디바운스된 함수예요.

예시

import { useDebouncedCallback } from 'react-simplikit';
import { useState } from 'react';

function SearchInput() {
  const [query, setQuery] = useState('');
  const setQueryDebounced = useDebouncedCallback({
    onChange: setQuery,
    timeThreshold: 300,
  });

  return (
    <>
      <input onChange={e => setQueryDebounced(e.target.value)} />
      <p>검색어: {query}</p>
    </>
  );
}