Help

useDebouncedSearch - Admin Components

Note: This hook is available since Medusa v2.21.0.

The useDebouncedSearch hook manages a search input's value and exposes a debounced copy of it. The Medusa Admin uses it to avoid sending a request to the Medusa backend on every keystroke, such as in the useComboboxData hook.

Code
import { useDebouncedSearch } from "@medusajs/dashboard/hooks"

Example#

Bind searchValue to the input and use query in the request to the Medusa backend:

Code
import { useDebouncedSearch } from "@medusajs/dashboard/hooks"
import { Input } from "@medusajs/ui"
import { useQuery } from "@tanstack/react-query"
import { sdk } from "../lib/sdk"

const ProductSearch = () => {
  const { searchValue, onSearchValueChange, query } =
    useDebouncedSearch()

  const { data } = useQuery({
    queryKey: ["products", query],
    queryFn: () => sdk.admin.product.list({ q: query }),
  })

  return (
    <Input
      value={searchValue}
      onChange={(e) => onSearchValueChange(e.target.value)}
      placeholder="Search products"
    />
  )
}

The hook updates query 300 milliseconds after the user stops typing, so the query only refetches once for a series of keystrokes.

Returns#

searchValuestring

The current value of the search input, updated immediately on every change. Its initial value is an empty string.

onSearchValueChange(value: string) => void

A function that sets the search value. Pass it to the input's change handler.

querystring | undefined

The debounced search value, updated 300 milliseconds after the last change. It's undefined when the search value is empty, so that you can pass it directly as a query parameter and omit it when there's no search.

Was this page helpful?