React- what is happening when you switch your tabs in browser with animation?

Question

In component I have a function that is doing some stuff with promise. I made that while promise is still pending I display a loading animation, it is just a spinner that is rotating around. I made the animation by setting an interval in componentDidMount that is adding 180 deg to transform rotate icon. Everything is working perfectly, however while testing I occured strange thing. For testing purpose I had the icon displayed all the time to watch if animation was working good. Everything was working nice and smoothly when I was observing. However if I switch tabs in my browser and after some time go back the spinner for moment was rotating like crazy. After some testing I realized the longer I was tabbed on different page, the faster spinner was at beginning after I tabbed back. It is like it was catching up on all the animation that I missed while tabbed out. It only happens when I have different tab opened in the browser, if for example I am doing some stuff in other program it is not happening. In this case this is not a problem for me because the spinner will be displayed for like 5s max, but I would like to know what is going on for future if I make some stuff that is being animated 24/7.

constructor(props) {
    super(props);
    this.state = {
      iconRot: 0,
      intervalId: 0,
    };
  }

componentDidMount() {
    const intervalId = setInterval(() => {
      const rot = this.state.iconRot;
      const newRot = rot >= 100000 ? 0 : rot + 360;
      this.setState({ iconRot: newRot });
    }, 2000);
    this.setState({ intervalId });
  }

  componentWillUnmount() {
    clearInterval(this.state.intervalId);
  }

<FontAwesomeIcon
          icon={faCircleNotch}
          className="loadIcon"
          style={{ transform: `rotate(${this.state.iconRot}deg)` }}
        />

.loadIcon {
  font-size: 8rem;
  color: #fff;
  transition: all ease-in-out 2000ms;
}