Saltar al contenido principal

useDebounce()

Retrasa la actualización de los parámetros mediante debounce.

Es útil para evitar saturar la red con solicitudes cuando los parámetros pueden cambiar rápidamente (como en un campo de typeahead).

React 18+

Al cargar datos nuevos, AsyncBoundary seguirá renderizando los datos anteriores hasta que los nuevos estén listos. isPending será true mientras se cargan.

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;