useDebounce()

通过防抖延迟参数的更新。

当参数可能快速变化时（例如输入联想字段），可用于避免频繁发送网络请求。

React 18+

加载新数据时，AsyncBoundary 会继续渲染之前的数据，直到新数据就绪。加载期间 isPending 为 true。

用法

IssueQuery

IssueList

SearchIssues

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 />);

结果

Store▶

类型

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