"use client"
 
import * as React from "react"
 
import { useDebounceCallback } from "@/hooks/use-debounce-callback"
 
export function Component() {
  const [value, setValue] = React.useState("")
 
  const debounced = useDebounceCallback(setValue, 500)
 
  return (
    <div>
      <p>Debounced value: {value}</p>
 
      <input
        type="text"
        defaultValue={value}
        onChange={(event) => debounced(event.target.value)}
      />
    </div>
  )
}