Skip to main content

useDebounce()

Delays updating the parameters by debouncing.

Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).

React 18+

When loading new data, the AsyncBoundary will continue rendering the previous data until it is ready. isPending will be true while loading.

Usage​

import { AsyncBoundary } from '@data-client/react'; import { useDebounce } from '@data-client/react'; import IssueList from './IssueList';  export default function SearchIssues() {  const [query, setQuery] = React.useState('');  const handleChange = e => setQuery(e.currentTarget.value);  const [debouncedQuery, isPending] = useDebounce(query, 200);  return (  <>  <TextInput  spellCheck="false"  placeholder="Search react issues"  value={query}  onChange={handleChange}  loading={isPending}  autoFocus  size="large"  >  <SearchIcon />  </TextInput>  <AsyncBoundary fallback={<Loading />}>  <IssueList query={debouncedQuery} owner="facebook" repo="react" />  </AsyncBoundary>  </>  ); } render(<SearchIssues />);
🔴 Live Preview
Store▶

Types​

function useDebounce<T>(value: T, delay: number, updatable?: boolean): T;