In my case, this seems to work. Cache the changes in the onWheel
handler, then schedule with requestAnimationFrame
to do the calculation and actually setState
.
...
zoomFactor: 0,
zoomX: 0,
zoomY: 0,
onWheel: function (event) {
this.zoomFactor += event.deltaY;
this.zoomX = event.nativeEvent.pageX;
this.zoomY = event.nativeEvent.pageY;
requestAnimationFrame(this.scheduleZoom);
},
scheduleZoom: function () {
var scale = ...; // Calc new scale, x, and y
this.zoomFactor = 0;
this.setState({
scale: scale,
x: x,
y: y
});
},
...
For a lower-level option to batch all changes, see https://github.com/petehunt/react-raf-batching