React.js: batching setState to ensure only one DOM layout/paint

Question

I have an onWheel handler that is doing setState which is causing more layouts than paints:

... any good pattern for avoiding this by batching the event value changes to one setState?

(I thought that there was some magic around this built-in.)

Answer 1

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