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/next';
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;