@modern-kit/react
Version:
1 lines • 3.99 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useDebounce/index.ts"],"sourcesContent":["import { debounce } from '@modern-kit/utils';\nimport { useMemo } from 'react';\nimport { useUnmount } from '../useUnmount';\nimport { usePreservedCallback } from '../../hooks/usePreservedCallback';\n\ntype DebounceParameters = Parameters<typeof debounce>;\ntype DebounceReturnType<T extends (...args: any) => any> = ReturnType<\n typeof debounce<T>\n>;\n\n/**\n * @description 주어진 콜백 함수를 `디바운스(지연)` 처리하여 특정 시간 동안 반복 호출을 방지하는 훅입니다.\n *\n * 콜백 함수는 마지막으로 호출된 시점으로부터 `wait` 밀리초가 경과할 때까지 실행이 지연됩니다.\n * - 연속 호출 시 이전 호출은 취소되고 새로운 타이머가 시작됩니다.\n *\n * @template T - 콜백 함수 타입입니다.\n * @param {DebounceParameters[0]} callback - 디바운스할 콜백 함수입니다.\n * @param {DebounceParameters[1]} wait - 지연시킬 시간(밀리초)입니다.\n * @param {DebounceParameters[2]} options - 디바운스 동작과 관련된 옵션 객체입니다.\n * @param {number} options.maxWait - 최대 대기 시간(밀리초)입니다.\n * debounce는 기본적으로 호출되면 대기 시간이 초기화됩니다. maxWait 옵션은 연속적인 호출이 발생하더라도 첫 호출 기준으로 최대 대기 시간이 지나면 강제로 함수가 실행됩니다.\n * @param {boolean} options.leading - 첫 번째 호출을 실행할지 여부입니다.\n * @param {boolean} options.trailing - 마지막 호출을 실행할지 여부입니다.\n * @param {AbortSignal} options.signal - 디바운스된 함수를 취소하기 위한 선택적 AbortSignal입니다.\n *\n * @returns {DebouncedFunction<F>} `cancel` 메서드가 포함된 새로운 디바운스된 함수를 반환합니다.\n * - `cancel` 메서드는 디바운스된 함수의 대기 중인 실행을 취소합니다.\n * - `flush` 메서드는 대기 중인 실행이 있는 경우 디바운스된 함수를 즉시 실행합니다.\n *\n * @example\n * const debouncedFunction = useDebounce(callback, 1000);\n * debouncedFunction(); // 1초 후에 함수가 실행됩니다\n *\n * @example\n * // AbortSignal 사용 예시\n * const controller = new AbortController();\n * const signal = controller.signal;\n * const debouncedWithSignal = useDebounce(callback, 1000, { signal });\n *\n * debouncedWithSignal();\n *\n * // 디바운스된 함수 호출을 즉시 실행합니다\n * controller.abort();\n */\nexport function useDebounce<T extends DebounceParameters[0]>(\n callback: T,\n wait: DebounceParameters[1],\n options: DebounceParameters[2] = {}\n): DebounceReturnType<T> {\n const callbackAction = usePreservedCallback(callback);\n const { signal, leading = false, trailing = true, maxWait } = options ?? {};\n\n const debounced = useMemo(() => {\n return debounce(callbackAction, wait, {\n signal,\n leading,\n trailing,\n ...(typeof maxWait === 'number' && { maxWait }),\n });\n }, [callbackAction, wait, signal, leading, trailing, maxWait]);\n\n // 언마운트 시 디바운스 된 함수의 보류 중인 호출을 모두 버립니다.\n useUnmount(() => debounced.cancel());\n\n return debounced;\n}\n"],"names":["usePreservedCallback","useMemo","debounce","useUnmount"],"mappings":";;;;;;;AA6CO,SAAS,WAAA,CACd,QAAA,EACA,IAAA,EACA,OAAA,GAAiC,EAAC,EACX;AACvB,EAAA,MAAM,cAAA,GAAiBA,+CAAqB,QAAQ,CAAA;AACpD,EAAA,MAAM,EAAE,QAAQ,OAAA,GAAU,KAAA,EAAO,WAAW,IAAA,EAAM,OAAA,EAAQ,GAAI,OAAA,IAAW,EAAC;AAE1E,EAAA,MAAM,SAAA,GAAYC,cAAQ,MAAM;AAC9B,IAAA,OAAOC,cAAA,CAAS,gBAAgB,IAAA,EAAM;AAAA,MACpC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAI,OAAO,OAAA,KAAY,QAAA,IAAY,EAAE,OAAA;AAAQ,KAC9C,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,cAAA,EAAgB,IAAA,EAAM,QAAQ,OAAA,EAAS,QAAA,EAAU,OAAO,CAAC,CAAA;AAG7D,EAAAC,0BAAA,CAAW,MAAM,SAAA,CAAU,MAAA,EAAQ,CAAA;AAEnC,EAAA,OAAO,SAAA;AACT;;;;"}