Pular para o conteúdo principal

useDebounce()

Atrasa a atualização dos parâmetros por meio de debounce.

Útil para evitar o excesso de requisições de rede quando os parâmetros podem mudar rapidamente (como em um campo de typeahead).

React 18+

Ao carregar novos dados, o AsyncBoundary continuará renderizando os dados anteriores até que os novos estejam prontos. isPending será true durante o carregamento.

Uso​

import React from 'react';
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 />);
Resultado
Store▶

Tipos​

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