useThrottle

입력값의 변경 빈도를 제한하는 Hook입니다. 지정된 시간 동안 마지막으로 변경된 값만 반영합니다.

Props

이름	타입	설명	기본값
value	`T`	스로틀링할 입력 값	-
delay	`number`	지연 시간 (밀리초)	`1000`

Return

스로틀링된 값 (T)

Usage

import { useThrottle } from '@teamsparta/react';
 
function Example() {
  const [value, setValue] = useState('');
  const throttledValue = useThrottle(value, 1000);
 
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="입력하세요..."
      />
      <div>입력값: {value}</div>
      <div>스로틀된 값: {throttledValue}</div>
    </div>
  );
}

Example

실시간 검색

function SearchComponent() {
  const [query, setQuery] = useState('');
  const throttledQuery = useThrottle(query, 500);
 
  useEffect(() => {
    if (throttledQuery) {
      searchAPI(throttledQuery);
    }
  }, [throttledQuery]);
 
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="검색어를 입력하세요..."
      />
      <div>검색 중인 키워드: {throttledQuery}</div>
    </div>
  );
}

윈도우 리사이즈 이벤트 처리

function WindowSizeTracker() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
 
  const throttledSize = useThrottle(windowSize, 200);
 
  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
 
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return (
    <div>
      <div>
        현재 창 크기: {throttledSize.width} x {throttledSize.height}
      </div>
    </div>
  );
}

주의사항

입력값이 자주 변경되는 경우에 사용하면 효과적입니다.
지연 시간은 사용 사례에 따라 적절히 조정해야 합니다.
모든 값의 변경을 추적해야 하는 경우에는 사용을 피해야 합니다.

useStopwatch useTimer