is react capable of 100ms updates in chrome

Question

OS: Ubuntu 18.10

Node: v12.13.1

Browser: 79.0.3945.88 (Official Build) (64-bit)

I am new to react but experienced with Javascript. I am trying to create a simple "clicker" game as my first react app. I have set a 100ms timer and I believe I'm updating the state correctly. Every 100ms I update and display a counter to the DOM, that's it.

The problem I'm having is that my app is freezing chrome randomly after ~20 seconds. When the browser freezes the only way to get it back is to click another tab. When I look at chrome performance tab it seems like it may be garbage collection related.

I've tried to boil this down to the bare minimum however the problem gets worse if the render() has a few more elements (like 10).

I made a default app with:

npx create-react-app my-app

And these are my only changes:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };

    this.handleStop = this.handleStop.bind(this);
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      100
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  handleStop(e) {
    clearInterval(this.timerID);
  }

  tick() {
    const s = this.state;
    this.setState({
      count: s.count+1
    });
  }

  render() {
    let s = this.state;
    return (
      <div>
        <h1>{s.count}</h1>
        <button onClick={this.handleStop}>Stop Counter</button><br/>
      </div>
    );
  }
}

Full code: https://github.com/esromneb/timer-fail

Normally we would expect 100ms frames however when it hangs I get a 14 second frame. I have to click another tab to get it back.

What am I doing wrong? Is react not meant for 100ms updates forever? Thanks.