How to Effectively Debounce in React Applications?

How can I perform a debounce?

Response to the original question

The provided debounce function is not working because this is not bound to the handleOnChange function. To fix this:

    handleOnChange: function(event) {
        // Make Ajax call
    }.bind(this)

Modern debouncing techniques

Promises and hooks (recommended, 2019 )

const SearchBox = React.createClass({
render: function() {
return <input type=&quot;search&quot; name=&quot;p&quot; onChange={this.handleOnChange} />;
},
handleOnChange: function(event) {
    // Make Ajax call
  }
});

Promise debouncing

import React from 'react';
import awesomeDebouncePromise from 'awesome-debounce-promise';

const SearchBox = () => {
    const [inputText, setInputText] = React.useState('');

    const debouncedSearch = React.useMemo(
        () => awesomeDebouncePromise(args => searchStarwarsHeroAsync(args), 300),
        []
    );

    // ...rest of SearchBox component
};

Callbacks

With ES6 class properties:

class SearchBox extends React.Component {
    method = debounce(() => {
        // ...
    });
}

With ES6 class constructor:

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.method = debounce(this.method.bind(this), 1000);
    }
    method() { ... }
}

With ES5:

var SearchBox = React.createClass({
    method: function() {...},
    componentWillMount: function() {
        this.method = debounce(this.method.bind(this), 100);
    },
});

Handling event pooling in React

In React, event objects are pooled and can be reused. This can lead to issues when using debounce or throttle, as the event properties may be cleared after the event callback is called.

To avoid this, use the persist() method on the event object. This will prevent the event from being pooled and allow you to access its properties asynchronously.

onClick = (e) => {
    e.persist();
    // ...
};

The above is the detailed content of How to Effectively Debounce in React Applications?. For more information, please follow other related articles on the PHP Chinese website!