How to Effectively Debounce in React Applications?-JS Tutorial-php.cn

How to Effectively Debounce in React Applications?

Mary-Kate Olsen

Release： 2024-12-09 16:05:11

Original

433 people have browsed it

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)

Copy after login

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

Copy after login

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
};

Copy after login

Callbacks

With ES6 class properties:

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

Copy after login

With ES6 class constructor:

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

Copy after login

With ES5:

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

Copy after login

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();
    // ...
};

Copy after login

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!