How can we debounce render a React Component? (with example)
Tags: javascript, react, debouncing, frontend
Published: 2019-07-25 13:27:43

---
title: How can we debounce render a React Component? (with example)
published: true
description: Wondering how to debounce render a react component? Here’s a detailed overview of how to do that using a few lines of code
tags: javascript, reactjs, debouncing, front-end
cover_image: https://www.botreetechnologies.com/blog/wp-content/uploads/2019/07/debounce-render-a-react-component-1.png
---


## What is debouncing?

According to https://www.geeksforgeeks.org/debouncing-in-javascript/

**Debouncing** in JavaScript is a practice used to improve browser performance. There might be some functionality in a web page which requires **time-consuming computations**. If such a method is invoked frequently, it might greatly affect the performance of the browser, as JavaScript is a single-threaded language. Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it **limits the rate** at which a function gets invoked!

![](https://www.botreetechnologies.com/blog/wp-content/uploads/2019/07/interesting.png)

Yes, It sounds interesting!!! Next question is how we can use this in [React JS](https://www.botreetechnologies.com/blog/the-rising-popularity-of-reactjs-in-the-it-industry)?

The answer is [react-debounce-render](https://github.com/podefr/react-debounce-render)!

`react-debounce-render` is a **Higher Order Component** that wraps your react components and debounces their rendering.

This method can be used to prevent extra renders when a react component rapidly receives new props by delaying the triggering of the render until updates become less frequent. Doing so will improve the overall rendering time of the application, thus improving the user experience. It uses lodash debounce under the hood. Reach out to learn more about the [web development NYC experts](https://www.botreetechnologies.com/usa/web-development-company-new-york) for the various ways to improve or build the quality of projects and across your company.

### Read Also: [Top Libraries to use with Advanced React JS Applications!][1]

[1]: https://www.botreetechnologies.com/blog/top-libraries-to-use-with-advanced-react-js-applications

You can find my whole source code at https://github.com/AnkurVyas-BTC/react-debounce-example

Let's see how we can use react-debounce-render with our big [React applications](https://www.botreetechnologies.com/react-native-development)!

![react debounce example](https://raw.githubusercontent.com/AnkurVyas-BTC/react-debounce-example/master/Final%20debouce.gif)

Only two things are present here -

**1. Simple Textbox**
**2. Displaying data based on the input text**

In my sample application, what I have done is to print the input text after 2 seconds. You can consider it a heavy time-consuming computation.


```javascript
import React, { Component } from 'react';

class Calculator extends Component {

  sleep = (milliseconds) => {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
      if ((new Date().getTime() - start) > milliseconds) {
        break;
      }
    }
  }

  timedOutDisplay = (inputVal) => {
    this.sleep(2000);
    return `Heavy calculation based on input => ${inputVal}`;
  }

  render() {

    return (
      <React.Fragment>
        {this.timedOutDisplay(this.props.inputVal)}
      </React.Fragment>
    );
  }
}

export default Calculator;
```

The code `this.sleep(2000)` allows adding 2 seconds delay.

The examples are as follows - 

**1. Without Debounce Rendering**

If you type any text (`12345` in the GIF), the input becomes unusable and is blocking UI.

It will take every change from 1 to 2, 2 to 3, 3 to 4 and 4 to 5. So you will see - 

Heavy calculation based on input => 12345

**after ~10 seconds ( 2 seconds delay after each input)**

**2. With Debounce Rendering**

We can make any component debounce rendered by adding two lines.

Import debounceRender and wrap component within debounceRender

```javascript
import debounceRender from 'react-debounce-render';

export default debounceRender(WithDebounceCalculator, 500);
```

Look at below example


```javascript
import React, { Component } from 'react';
import debounceRender from 'react-debounce-render';

class WithDebounceCalculator extends Component {

  sleep = (milliseconds) => {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
      if ((new Date().getTime() - start) > milliseconds) {
        break;
      }
    }
  }

  timedOutDisplay = (inputVal) => {
    this.sleep(2000);
    return `Heavy calculation based on input => ${inputVal}`;
  }

  render() {

    return (
      <React.Fragment>
        {this.timedOutDisplay(this.props.inputVal)}
      </React.Fragment>
    );
  }
}

export default debounceRender(WithDebounceCalculator, 500);
```
Now, if you type any text (`12345` in the GIF) the input is very smooth and is not blocking UI.
If will take change 12345 as a collection. So you will see -

Heavy calculation based on input => 12345

**after ~2 seconds**

When you are using filters which requires heavy computation the debounced rendering is an appropriate fit!