How do I execute code every frame in Ionic React?

Question

First of all, I'm completely new to Ionic, React and JSX and fairly new to JS in general. For learning purposes I want to play around with something like a "mini experimental idle game".

Now, I'm trying to update some field every frame and do some calculations. I know this will be quite CPU-intensive and battery-draining (on mobile devices) but I specifically want that behavior. I have set my tsconfig.json { "strict": false }, so I can use plain JS, which I'm a bit more used to.

So say, I have this element:

var count = 0;

<IonCardTitle>
    <span id="fieldCount">{count}</span> Things
</IonCardTitle>

What I know want is to run something like this every single frame:

if(count < 1000000) {
    document.querySelector('#moneycount').innerHTML = count.toString();
    count++;
}

How would I go about changing the .innerHTML of the element every frame and increment count?

Answer 1

I forced React to render continuously by working from Gabriels answer.

I added the following into the index.tsx:

const interval = setInterval(() => {
  ReactDOM.render(<App />, document.getElementById('root'));
}, 50); // every 50ms

According to React the renderer only updates what needs to be updated when called so I'm confident this is actually the way to go.