Performance of rendering animations using React.

[trusktr]

I don't know if it's just me, but it seems like doing this is a bit harsh for performance. There's a lot going on behind the scenes right (like React doing some diffing algorithms every frame each time render is called based on the state changing every 20 ms)?

It seems to me (correct me if I'm wrong) that React is better suited for rendering tree-like data structures (for example, rendering the structure of a DOM tree or the structure of a Three.js scene graph) but not for animating things in that structure at 60fps (less than 60fps in the case of a 20ms tick that isn't using requestAnimationFrame).

It seems to me that animating things like rotation (things that don't modify the nested structure rendered with React) should better be left to some other mechanism outside of React, a method that doesn't incur the performance cost of React's inner workings every frame. For example, I think a better approach would be to use React to change a state variable that specifies the "state" of an animation and for a separate handler to handle how that animation happens, using the vanilla API of the ART library. It'd be similar to using CSS classes to specify different states of animation for DOM elements, with CSS transitions between those states.

[trusktr]

Here's a jsfiddle showing DOM animation in this way: http://jsfiddle.net/Ut2X6/

I'd highly recommend not to do it that way (the circular movement part, although the incrementing of the numbers is a fine use case) but instead use CSS animation or a library designed for that purpose like Velocity.js, Famous 0.3.x, GSAP, or our upcoming library, Use these libraries with (outside of) the structural engine (Backbone, React, Angular, Ember, etc, are engines that render structures).