Выполните debounce в React.js

Хорошее и чистое решение, которое не требует никаких внешних зависимостей:

Debouncing с Реагируют Рычаги

, Это использует пользовательское плюс useEffect, Реагируют рычаги и setTimeout / clearTimeout метод.

Существует use-debounce пакет, который можно использовать с рычагами ReactJS.

От README пакета:

import { useDebounce } from 'use-debounce';

export default function Input() {
  const [text, setText] = useState('Hello');
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={'Hello'}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Actual value: {text}</p>
      <p>Debounce value: {value}</p>
    </div>
  );
}

, Как Вы видите от примера выше, он настраивается для обновления переменной value только один раз во второй (1 000 миллисекунд).

Избегайте использования event.persist() - Вы хотите позволить, Реагируют, перерабатывают синтетическое событие. Я думаю самый чистый путь, используете ли Вы классы, или рычаги должен разделить обратный вызов на две части:

1. обратный вызов без debouncing
2. Вызывает debounced функцию с [1 113] только [1 113] части события, в котором Вы нуждаетесь (таким образом, синтетическое событие может быть переработано)

Классы

handleMouseOver = throttle(target => {
  console.log(target);
}, 1000);

onMouseOver = e => {
  this.handleMouseOver(e.target);
};

<div onMouseOver={this.onMouseOver} />

Функции

const handleMouseOver = useRef(throttle(target => {
  console.log(target);
}, 1000));

function onMouseOver(e) {
  handleMouseOver.current(e.target);
}

<div onMouseOver={this.onMouseOver} />

Примечание, что, если Ваш handleMouseOver функция использует состояние из компонента, необходимо использовать useMemo вместо useRef и передать тех, которые как зависимости иначе, Вы будете работать с устаревшими данными (не относится к классам, конечно).

2019: Использование 'useCallback' реагируют, сцепляется

После попытки многих разных подходов, я нашел, что использование 'useCallback' было самым простым и самым эффективным при решении проблемы множественных вызовов использования debounce в onChange событии. Согласно документация API Рычагов, "useCallback возвращает запоминаемую версию обратного вызова, который только изменяется, если одна из зависимостей изменилась". При передаче пустого массива, поскольку зависимость удостоверяется, что обратный вызов называют только однажды. Вот простая реализация.

import React, { useCallback } from "react";
import { debounce } from "lodash";

const handler = useCallback(debounce(someFunction, 2000), []);

const onChange = (event) => {
    // perform any event related action here

    handler();
 };

Hope это помогает!

Вот отрывок с помощью подхода @Abra, перенесенного в функциональный компонент (мы используем матрицу для UI, просто заменяем его простой кнопкой)

import React, { useCallback } from "react";
import { debounce } from "lodash";

import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';

const debounceTimeInMS = 2000;

export const PrimaryButtonDebounced = (props) => {

    const debouncedOnClick = debounce(props.onClick, debounceTimeInMS, { leading: true });

    const clickHandlerDebounced = useCallback((e, value) => {

        debouncedOnClick(e, value);

    },[]);

    const onClick = (e, value) => {

        clickHandlerDebounced(e, value);
    };

    return (
        <PrimaryButton {...props}
            onClick={onClick}
        />
    );
}

Существует теперь другое решение для, Реагируют и Реагируют Собственный компонент в [1 112] поздний/2019 :

<input>
<Debounce ms={500}>
  <List/>
</Debounce>

import React from 'react';
import Debounce from 'react-debounce-component';

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {value: 'Hello'}
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={(event) => {this.setState({value: event.target.value})}}/>
        <Debounce ms={1000}>
          <div>{this.state.value}</div>
        </Debounce>
      </div>
    );
  }
}

export default App;