useDebounce

import { useDebounce } from '@frontend-toolkit-js/hooks';
 
function SearchInput() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 300);
 
  useEffect(() => {
    if (debouncedSearch) {
      // 300ms 후 검색 실행
      fetchResults(debouncedSearch);
    }
  }, [debouncedSearch]);
 
  return (
    <input
      value={search}
      onChange={e => setSearch(e.target.value)}
      placeholder="검색..."
    />
  );
}

function AutocompleteSearch() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);
 
  useEffect(() => {
    if (debouncedQuery.length >= 2) {
      fetch(`/api/search?q=${debouncedQuery}`)
        .then(res => res.json())
        .then(setResults);
    }
  }, [debouncedQuery]);
 
  return <input onChange={e => setQuery(e.target.value)} />;
}

function UsernameInput() {
  const [username, setUsername] = useState('');
  const debouncedUsername = useDebounce(username, 300);
  const [isAvailable, setIsAvailable] = useState(null);
 
  useEffect(() => {
    if (debouncedUsername) {
      checkUsername(debouncedUsername).then(setIsAvailable);
    }
  }, [debouncedUsername]);
 
  return (
    <div>
      <input onChange={e => setUsername(e.target.value)} />
      {isAvailable !== null && <span>{isAvailable ? '✅' : '❌'}</span>}
    </div>
  );
}

function ResponsiveComponent() {
  const [size, setSize] = useState(window.innerWidth);
  const debouncedSize = useDebounce(size, 200);
 
  useEffect(() => {
    const handleResize = () => setSize(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
 
  return <div>Width: {debouncedSize}px</div>;
}

function useDebounce<T>(value: T, delay: number): T;

사용자 입력: a → ab → abc → abcd
              ↓
useDebounce:  [300ms 대기]
              ↓
결과:         abcd (300ms 후 한 번만 업데이트)

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
 
    return () => clearTimeout(timer);
  }, [value, delay]);
 
  return debouncedValue;
}

// useDebounce: 값 디바운스
const debouncedValue = useDebounce(value, 300);
 
// useDebouncedCallback: 함수 디바운스
const debouncedFn = useDebouncedCallback(() => {...}, 300);

// 초기 렌더링 시 즉시 반환
const debouncedSearch = useDebounce('', 300);
console.log(debouncedSearch); // '' (즉시)
 
// 이후 변경은 지연됨

// delay가 자주 바뀌면 타이머가 계속 리셋됨
const delay = Math.random() * 1000; // ❌ Bad
const debouncedValue = useDebounce(value, delay);
 
// delay는 고정값 사용
const debouncedValue = useDebounce(value, 300); // ✅ Good

// 타입 자동 추론
const search = 'hello';
const debouncedSearch = useDebounce(search, 300);
//    ^? string
 
const count = 42;
const debouncedCount = useDebounce(count, 300);
//    ^? number
 
// 객체도 가능
const filters = { category: 'tech', price: 100 };
const debouncedFilters = useDebounce(filters, 500);
//    ^? { category: string; price: number }