{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-debounce-state",
  "title": "UseDebounceState",
  "description": "Debounce the state update.",
  "files": [
    {
      "path": "registry/hooks/use-debounce-state.tsx",
      "content": "'use client';\n\nimport {\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\ninterface UseDebouncedStateOptions {\n  leading?: boolean;\n}\n\nexport function useDebouncedState<T>(\n  defaultValue: T,\n  delay: number = 500,\n  options: UseDebouncedStateOptions = {},\n) {\n  const [value, setValue] = useState<T>(defaultValue);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const leadingRef = useRef(true);\n\n  const clearDebounceTimeout = useCallback(() => {\n    if (timeoutRef.current !== null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      clearDebounceTimeout();\n    };\n  }, [clearDebounceTimeout]);\n\n  useEffect(() => {\n    leadingRef.current = true;\n  }, [defaultValue]);\n\n  const debouncedSetValue = useCallback(\n    (newValue: SetStateAction<T>) => {\n      clearDebounceTimeout();\n      if (leadingRef.current && options.leading) {\n        setValue(newValue);\n      } else {\n        timeoutRef.current = setTimeout(() => {\n          leadingRef.current = true;\n          setValue(newValue);\n        }, delay);\n      }\n      leadingRef.current = false;\n    },\n    [clearDebounceTimeout, delay, options.leading],\n  );\n\n  return [value, debouncedSetValue] as const;\n}\n",
      "type": "registry:hook",
      "target": "hooks/guarahooks/use-debounce-state.tsx"
    }
  ],
  "categories": [
    "state-management"
  ],
  "type": "registry:hook"
}