{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-throttled-callback",
  "title": "useThrottleCallback",
  "description": "A hook to throttle a callback",
  "files": [
    {
      "path": "registry/hooks/use-throttled-callback.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport function useThrottledCallback<T extends (...args: any[]) => any>(\n  fn: T,\n  deps: React.DependencyList,\n  delay: number,\n): (...args: Parameters<T>) => void {\n  const lastExecutedRef = React.useRef(0)\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n  const argsRef = React.useRef<Parameters<T> | null>(null)\n\n  const throttledFn = React.useCallback(\n    (...args: Parameters<T>) => {\n      const now = Date.now()\n      const remaining = delay - (now - lastExecutedRef.current)\n\n      argsRef.current = args\n\n      if (remaining <= 0) {\n        if (timerRef.current) {\n          clearTimeout(timerRef.current)\n          timerRef.current = null\n        }\n        lastExecutedRef.current = now\n        fn(...args)\n      }\n      else if (!timerRef.current) {\n        timerRef.current = setTimeout(() => {\n          lastExecutedRef.current = Date.now()\n          timerRef.current = null\n          if (argsRef.current) {\n            fn(...argsRef.current)\n          }\n        }, remaining)\n      }\n    },\n    [\n      fn,\n      delay,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      ...deps,\n    ],\n  )\n\n  React.useEffect(() => () => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current)\n    }\n  }, [])\n\n  return throttledFn\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-throttled-callback.ts"
    }
  ],
  "type": "registry:hook"
}