I want to experiment with performance of some React ponents inside my app. I know that ClojureScript's Om framework () uses some optimization techniques like using immutables with implementing shouldComponentUpdate() and rendering on requestAnimationFrame change.

Is there plain JavaScript mixin that could introduce rendering based on requestAnimationFrame?

I want to experiment with performance of some React ponents inside my app. I know that ClojureScript's Om framework (https://github./swannodette/om) uses some optimization techniques like using immutables with implementing shouldComponentUpdate() and rendering on requestAnimationFrame change.

Is there plain JavaScript mixin that could introduce rendering based on requestAnimationFrame?

• javascript
• render
• requestanimationframe
• reactjs

1 Answer 1

This is possible if you use something like Browserify or webpack to build React from a CommonJS environment, or otherwise produce a custom build of React. That is to say, you can't do this if you just use the downloadable, pre-built React.

Check out Pete Hunt's react-raf-batching project for a more prehensive solution (including rAF polyfills), but here's a minimal example to get this working:

var ReactUpdates = require("react/lib/ReactUpdates");

var rafBatchingStrategy = {
  isBatchingUpdates: true,
  batchedUpdates: function(callback, param) {
    callback(param);
  }
};

var tick = function() {
  ReactUpdates.flushBatchedUpdates();
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

ReactUpdates.injection.injectBatchingStrategy(rafBatchingStrategy);