{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-debounce-value",
  "title": "useDebounceValue",
  "description": "A generic hook that returns a value only after it has stopped changing for a delay, with no flash on first render.",
  "files": [
    {
      "path": "src/registry/hooks/use-debounce-value.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\n/**\n * Debounces a fast-changing value. The first render returns `value` as-is\n * (no flash-to-empty), then `debouncedValue` only catches up to the latest\n * `value` once `delay` ms have passed without `value` changing again — every\n * new `value` restarts the wait. Changing `delay` also restarts the timer\n * with the new duration. The pending timer is cleared on unmount (and before\n * every re-run), so no stray `setState` fires after the consumer is gone.\n */\nexport function useDebounceValue<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = React.useState(value)\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => clearTimeout(timeout)\n  }, [value, delay])\n\n  return debouncedValue\n}\n\nexport default useDebounceValue\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}