use-throttled-callback

use-throttled-callback

콜백을 일정 주기(wait 밀리초)마다 한 번씩만 실행하도록 스로틀(throttle)하는 훅이에요.

출처: 문서

본문

사용법 (Usage)

useThrottledCallback 훅에 콜백과 대기 시간을 넘겨주면, 지정된 시간 동안 마지막 호출만 실제로 실행돼요:

import { Text, TextInput } from '@mantine/core';
import { useThrottledCallback } from '@mantine/hooks';

function Demo() {
  const [throttledValue, setValue] = useState('');
  const throttledSetValue = useThrottledCallback((value) => setValue(value), 1000);

  return (
    <>
       throttledSetValue(event.currentTarget.value)}
      />
      Throttled value: {throttledValue || '–'}

  );
}

정의 (Definition)

function useThrottledCallback<T extends any>(
  callback: T,
  wait: number
): (...args: Parameters<T>) => void;

더 알아보기 (Learn more)