React.js - Render on requestAnimationFrame

Question

I want to experiment with running some React components inside my application. I know that the ClojureScript Om framework ( https://github.com/swannodette/om ) uses some optimization methods, such as using constants with the implementation of shouldComponentUpdate() and rendering when requestAnimationFrame changes.

Is there a simple javascript mixin that can render requestAnimationFrame based rendering?

Answer 1

This is possible if you use something like Browserify or webpack to create a React from CommonJS environment or otherwise create a custom React assembly. That is, you cannot do this if you are using only a downloadable, pre-built React.

Check out the Pete Hunt project-raf-batching project for a more complete solution (including RAF policies), but here is a minimal example for this:

 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);