A wrapper for using flying-squirrel with React

SquirrelWrapper.jsx

/** @jsx React.DOM */
'use strict';

var React = require('react');

var squirrelClient = require('../squirrelClient');

// FIXME: using lastRender for freezing the component doesn't work. skipping some updates with
// shouldComponentUpdate doesn't as well. The problem is that when the user clicks something, it
// triggers a setState on some descendant component and not on SquirrelWrapper. And this partial
// re-rendering happens before we get the information about data fetching from squirrel.
//
// To fix this, we need:
// 1. A callback that would be called by squirrel whenever data is requested (this means before all
//    these little queries are turned into one big http request)
// 2. Some way to clone the whole React virtual DOM tree and return it on any future render.
//    (this might help: https://github.com/ryanflorence/react-magic-move/blob/master/modules/components/MagicMove.js)

var SquirrelWrapper = React.createClass({
    getInitialState: function () {
        return {
            fetchingData: false,
        };
    },
    componentWillMount: function () {
        var that = this;
        this.data = squirrelClient.getDataForDynamicIO(function() {
            that.setState({fetchingData: true});
        }, function (err) {
            if (err) {
                console.error(err);
            }
            that.setState({fetchingData: false});
        });
    },
    render: function() {
        if (this.state.fetchingData) {
            return <div className="SquirrelWrapper fetchingData">{ this.lastRender }</div>;
        } else {
            this.lastRender = this.props.render.call(null, this.data);
            return <div className="SquirrelWrapper">{ this.lastRender }</div>;
        }
    },
});

module.exports = SquirrelWrapper;