use-throttled-state

use-throttled-state

상태 값 업데이트를 스로틀(throttle)해서 관리하는 훅이에요. 조절된 값과 설정 함수를 반환해요.

출처: 문서

본문

사용법 (Usage)

useThrottledState 훅에 기본값과 대기 시간을 넘겨주면, 지정된 시간 동안 스로틀된 상태 값과 설정 함수를 얻을 수 있어요:

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

function Demo() {
  const [throttledValue, setThrottledValue] = useThrottledState('', 1000);

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

  );
}

정의 (Definition)

function useThrottledState<T>(
  defaultValue: T,
  wait: number
): readonly [T, (newValue: React.SetStateAction<T>) => void];

더 알아보기 (Learn more)