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
1import { useDebouncedSearch } from "@medusajs/dashboard/hooks"2import { Input } from "@medusajs/ui"3import { useQuery } from "@tanstack/react-query"4import { sdk } from "../lib/sdk"5
6const ProductSearch = () => {7  const { searchValue, onSearchValueChange, query } =8    useDebouncedSearch()9
10  const { data } = useQuery({11    queryKey: ["products", query],12    queryFn: () => sdk.admin.product.list({ q: query }),13  })14
15  return (16    <Input17      value={searchValue}18      onChange={(e) => onSearchValueChange(e.target.value)}19      placeholder="Search products"20    />21  )22}

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?