Using setTimeout to avoid re-renders in React

Question

There is a pattern that I use often that I feel must be an anti-pattern but I don't know a better alternative.

Occasionally my components may receive one or more events that mean that a re-render is necessary. Sometimes it is the case that I do not know how many times the event handlers will be called. To prevent multiple re-renders as a result of many calls to the handlers I do something like this:

 _myEventHandler() { // may be called multiple times between renders
   if (!this._updateQueued) {
     this._updateQueued = true;
     this._updateTimer = setTimeout(() => {
       this._updateQueued = false;
       this.forceUpdate();
     }, 0);
   }
 }

The problem here is I feel it can't be performant due to the latency between code stopping and the event loop starting.

A real world example of this is when I am using react-visibility-sensor and I have multiple elements change their visibility at once, I don't want to re-render for each element, instead I want just one re-render once all the updates have been received.

Is there another better way to deal with multiple calls?

BTW: if you are going to use the above hack don't forget to call clearTimout(this._updateQueued) in your componentWillUnmount

Using a debounce is effectively the same as above. Under the hood a debounce is using a setTimeout — Jack Allan, Mar 05 '18 at 17:22
Please look into `shouldComponentUpdate(nextProps, nextState) {return true or false;}` — fungusanthrax, Mar 05 '18 at 18:10
If the problem is getting a component to prevent re-rendering this is definitely the route you want to take. Could you provide more info on how this is unrelated? — fungusanthrax, Mar 05 '18 at 18:13

score 1 · Answer 1 · answered Mar 05 '18 at 18:18

1

A debounce will reduce the number of times a certain piece of code is run, regardless of how often it is called. Here is a rather simple implementation.

const debounce = (callable, time) => {
  let timeout;

  return function() {
    const functionCall = () => callable.apply(this, arguments);

    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  };
};

And this is how to use it.

const debouncedIteration = debouce(() => {
   console.log("Iteration"); // This will be called once every 1000 milliseconds.
}, 1000);

while (true) {
   debouncedIteration();
}

answered Mar 05 '18 at 18:18

Francis Malloch

1,074
9
20

Yes, quite possibly @JackAllan except a bit more standardized, the majority of React developers know what a debounce is. – Francis Malloch Mar 06 '18 at 02:08
Using a debouncer to cut down on re-renders is not an anti-pattern; in fact it's a common strategy for dealing with the sluggishness you often encounter with controlled inputs, to name just one example. – brogrammer Mar 08 '18 at 16:28

Fawaz · Answer 2 · 2018-03-06T07:56:37.443

1

You can avoid re-renders using this lifecycle method shouldComponentUpdate (as also mentioned by @fungusanthrax). Keep this inside your react component :

shouldComponentUpdate(nextProps, nextState) {
  return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
}

using isEqual from lodash here, make sure to include it. This will only re-render your component when there's a change in props or state value.

To install lodash:

npm install -S lodash

and import isEqual in your component file :

import isEqual from 'lodash/isEqual';

edited Mar 06 '18 at 07:56

answered Mar 05 '18 at 20:18

Fawaz

3,404
3
17
22

@JackAllan Did it helped ? – Fawaz Mar 06 '18 at 14:34

Using setTimeout to avoid re-renders in React

2 Answers2