{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-debounce-callback",
  "title": "UseDebounceCallback",
  "description": "Debounce the call of a function.",
  "files": [
    {
      "path": "registry/hooks/use-debounce-callback.tsx",
      "content": "'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nexport function useDebounceCallback<\n  Fn extends (...args: Parameters<Fn>) => void,\n>(callback: Fn, delay: number = 500): (...args: Parameters<Fn>) => void {\n  const callbackRef = useRef<typeof callback>(callback);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  const debouncedFn = useCallback(\n    (...args: Parameters<Fn>) => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(() => {\n        callbackRef.current(...args);\n      }, delay);\n    },\n    [delay],\n  );\n\n  // Clear the timeout when the component unmounts\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  return debouncedFn;\n}\n",
      "type": "registry:hook",
      "target": "hooks/guarahooks/use-debounce-callback.tsx"
    }
  ],
  "categories": [
    "state-management"
  ],
  "type": "registry:hook"
}