How to deal with setInterval bugs in react?

Question

JavaScript

There is a timer component, implemented using setIntarval.
1) But the problem is that when you change the tab, everything stops working, and when you return, it resumes, although the actions have already passed (I'm making a real-time application). How to deal with it?
2) Since the timer has a parent, a problem will arise, the countdown time comes from the parent, and since the state is updated every second, when the parent is updated, the timer is also updated and starts from the beginning, how to deal with this? Tried like this:

shouldComponentUpdate(nextProps, nextState) {
    if(this.state.startTime !== nextState.startTime) {
      return true;
    }

    if(this.state.text !== nextState.text) {
      return true;
    }

    return false;
  }

But it didn't help because the state is updated too often

Answer 1

Google setinterval inactive tab
This is not a react issue but a JS feature

Answer 2

I had a similar problem (php + js project), the clock ran 2 times faster. rendered in a separate script, time variable to the interface via ajax. I hope it helps
, see https://github.com/cwilso/metronome