Render called on every setState when using touch gestures - reactjs

Question

I have a problem using touch gestures in my react.js app. The problem is that the render() function is called on every setState call and not just at the end. This only happens when using Hammer.js to handle the tap. If using a regular button the render() function is only called once.
A few things to note:
I have also tried using react-hammerjs and ZingTouch with exactly the same result.
In the example i just use the Tap "gesture" but the result is the same if using for example the Swipe gesture.
I tried to use MobX for state instead. But again with the same result.
Here is my example that I have tried to make as simple as possible (the example does not make sense, but illustrates the problem):
import React from 'react';
import ReactDOM from 'react-dom';
import Hammer from 'hammerjs';
class Game extends React.Component {
constructor(props) {
super(props);
this.state = { value: 1 };
}
action() {
console.log(1)
this.setState({ value: 1 });
console.log(2)
this.setState({ value: 2 });
console.log(3)
this.setState({ value: 3 });
console.log(4)
this.setState({ value: 4 });
console.log(5)
}
componentDidMount() {
this.hammer = Hammer(this._touchdiv);
this.hammer.on('tap', () => this.action());
}
componentWillUnmount() {
this.hammer.off('tap', this.action)
}
render() {
console.log('Render');
return (
<div>
{this.state.value}
<div ref={(el) => this._touchdiv = el}> Touch div</div>
<button onClick={() => this.action()} value='update' >Normal button</button>
</div>
);
}
}
ReactDOM.render(<Game />, document.getElementById('root'));
The console output when using the regular button:
1
2
3
4
5
Render
The console output when using the "touch div":
1
Render
2
Render
3
Render
4
Render
5
I have tried to google it but could not find any similar examples.
Any idea what is happening? Any possible solution is welcome.
Edit 1:
ReyHaynes suggested that the ref could be the problem. I tried to change
<div ref={(el) => this._touchdiv = el}> Touch div</div>
to
<div className='xxx'> Touch div</div>
and changed
this.hammer = Hammer(this._touchdiv);
to
this.hammer = Hammer(document.getElementsByClassName("xxx")[0]);
The result is exactly the same. Yes, this is dirty code but it illustrates that the problem exists without using refs.

Answer 1

When using refs, once state changes, you re-render all the components of your UI that depend on that state.
React will take care of making sure only the right bits of the DOM is updated, making the whole thing efficient but render is called to check for the necessary changes.
Here's the docs on that: https://reactjs.org/docs/refs-and-the-dom.html
So essentially, this part of the touch code causes the render() to run:
ref={(el) => this._touchdiv = el}

Answer 2

Checking the call stack it seems like it's different how the callback is triggered.
Hammer will just call the callback if the gesture is recognized.
React catches the click event and sets the flag 'isBatchingUpdates' to true, making the render to wait until all setState are done.
Edit:
Found this article explaning it: https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60
"Currently (React 16 and earlier), only updates inside React event handlers are batched by default."