How to prevent React from re-rendering the whole component when using setInterval

Question

I'm developing an app player. see the picture below:

The progress bar must show the current time, but with every tick of setInterval(), my component re-renders everything. That's causing my app to be slow.

This is my code:

this.state = {
    currentTime: 0,
}


/// ....
const tick = 100;
setInterval(() => {
   this.setState({currentTime += tick});
}, tick);


render() {
   // This will call every tick (100ms). That's what I don't want, but if I skip it, the progress will not show the current time.
}

I assume that it is a single component, right? If so, how about creating two children components, with one parent component? One child will render the player, another will render the bottom progress bar. In such a case, setting the state for the 2nd child should not affect the 1st. — Yossi, Jul 27 '19 at 04:20
@Yossi: yes, the same result if separate to two children components — Enesy, Jul 27 '19 at 04:21
I found a similar [question](https://stackoverflow.com/questions/41763031/how-to-prevent-react-from-re-rendering-the-whole-component). — VoidChips, Jul 27 '19 at 04:45

score 0 · Answer 1 · answered Jul 27 '19 at 05:07

0

Thanks you all. I've resolved my problem by separate to children components. And dispatch to redux store to set currentTime for every stick in setInterval() function. Now it's work like a charm.

answered Jul 27 '19 at 05:07

Enesy

259
3
13

score 0 · Answer 2 · answered Jul 27 '19 at 10:31

0

Try to use:

  shouldComponentUpdate(nextProps, nextState) {
    return false;  
  }

answered Jul 27 '19 at 10:31

Piyush

129
5

How to prevent React from re-rendering the whole component when using setInterval

2 Answers2