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).

Usage​

import { useDebounce, AsyncBoundary } 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 = useDebounce(query, 200);
  return (
    <div>
      <label>
        Query:{' '}
        <input type="text" value={query} onChange={handleChange} />
      </label>
      <AsyncBoundary fallback={<div>searching...</div>}>
        <IssueList q={debouncedQuery} owner="facebook" repo="react" />
      </AsyncBoundary>
    </div>
  );
}
render(<SearchIssues />);
🔴 Live Preview
Store▶

Types​

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