Skip to content
Related Articles

Related Articles

Improve Article

How to Perform Debouncing in ReactJS ?

  • Difficulty Level : Medium
  • Last Updated : 29 Jun, 2021
Geek Week

A Debouncing Events in ReactJS will allow you to call a function that ensures that a time-consuming task does not fire so often. It’s a function that takes a function as a parameter and wraps that function in a closure and returns it so this new function displays the “wait for a bit” behavior.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app react-debouncing    

Step 2: After creating your project folder i.e. react-debouncing, move to it using the following command:

cd react-debouncing

 



Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install lodash

Project Structure: It will look like the following.

Project Directory

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React, { Component } from "react";
import { debounce } from "lodash";
  
class WidgetText extends Component {
  
  state = { text: "" };
  
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };
  
  render() {
    return (
      <div>
        <input onChange={this.handleChange} />
        <textarea value={this.state.text} />
      </div>
    );
  }
}
  
class App extends Component {
  
  state = { show: true };
  
  handleToggle = debounce(() => {
    this.setState(prevState => ({ show: !prevState.show }));
  }, 500);
  
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        {this.state.show ? <WidgetText /> : null}
      </div>
    );
  }
}
  
export default App;

Explanation:

  • Have a simple page with a toggle button, if we click it the input fields go away and click it again to get the input field back and if we type in the input box the text will immediately mirror in the text area below.
  • We have a React WidgetText component, and it essentially just has the input and text area and then the app component itself has the toggle button.
  • Conditionally so if we click the toggle button it will come in into the handler grab, the previous state look at it shows bool off of the state and flip it, So if it was true then it will render the WidgetText if it is false we do not render the WidgetText.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :