How can we debounce render a React Component? (with example)

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!

Yes, It sounds interesting!!! Next question is how we can use this in React JS?

The answer is 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 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!

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!

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.

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

import debounceRender from 'react-debounce-render';

export default debounceRender(WithDebounceCalculator, 500);

Look at below example

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!