React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

/////////////////////////////////////////////////////////////////////
// Here is the "lib" code


var shouldUpdateCounter = 0;

var ImmutableListRenderer = React.createClass({
    shouldComponentUpdate: function(nextProps) {
      shouldUpdateCounter++;
      return (nextProps.list !== this.props.list);
    },
  render: function() {
    return (<span>
        {this.props.list._root ? <GnRenderer gn={this.props.list._root}/> : undefined}
        {this.props.list._tail ? <GnRenderer gn={this.props.list._tail}/> : undefined}
</span>);
  }   
})


var GnRenderer = React.createClass({
    shouldComponentUpdate: function(nextProps) {
      shouldUpdateCounter++;
      return (nextProps.gn !== this.props.gn);
    },
    propTypes: {
        gn: React.PropTypes.object.isRequired,
    },
    render: function() {
        return (
            <span>
                {this.props.gn.array.map(function(gnItem,index) { 
                    if ( typeof gnItem === "object" ) {
                        return <GnRenderer gn={gnItem}/>
                    } else {
                        return <ListItem>{gnItem}</ListItem>
                    }
                }.bind(this))}
            </span>
        );
    }
})

var ListItem = React.createClass({
    shouldComponentUpdate: function(nextProps) {
      shouldUpdateCounter++;
      return (nextProps.children !== this.props.children);
    },
   render: function() {
      return <span>{" -> "}{this.props.children}</span>;
   }
});




/////////////////////////////////////////////////////////////////////
// Here is the "client" code to demonstrate usage

var mutableList = []
for ( var i=0 ; i < 10000 ; i++ ) { mutableList.push(i) };
   
   
var ImmutableList = Immutable.fromJS(mutableList);


function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
function getRandomIndex() {
	return getRandomInt(0,ImmutableList.size);
}


function pushItem() {
    var value = getRandomInt(0,1000);
    ImmutableList =...