Why Should I Care About Immutable Data In ReactJS?

Add Widget ); } }); // --------------------------------------------------------------------------- // // --------------------------------------------------------------------------- // // I manage the Widgets collection. var Widgets = React.createClass({ // I return the virtual DOM based on the current state. render: function() { var widgets = this.props.widgets.map( function operator( widget ) { return( ); }, this ); return(

{ widgets } ); } }); // --------------------------------------------------------------------------- // // --------------------------------------------------------------------------- // // I manage the Widget line item. var Widget = React.createClass({ // I get called before the components receives new props after its initial // rendering. At this point, we can update the state based on the change in // props. // -- // CAUTION: If these data references are mutated directly (ie, not treated // as immutable) anywhere in the chain, the before and after props may be // the same value. componentWillReceiveProps: function( newProps ) { console.log( "[ %s ] Component will receive props: current( %s ) vs new( %s ).", this.props.widget.name, this.props.widget.likes.length, newProps.widget.likes.length ); }, // I handle the click on the delete link. handleDelete: function( event ) { this.props.onDelete( this.props.widget.id ); }, // I handle the click on the like link. handleLike: function( event ) { this.props.onLike( this.props.widget.id ); }, // I return the virtual DOM based on the current state. render: function() { var likeCount = this.props.widget.likes.length; return(
• { this.props.widget.name } — Like ( { likeCount } ) { " or " } Delete ); }, // I determine if the component should update based on the delta in both // the props and the state. // -- // CAUTION: If these data references are mutated directly (ie, not treated // as immutable) anywhere in the chain, the before and after props may be // the same value. shouldComponentUpdate: function( newProps, newState ) { console.log( "[ %s ] Should component update: current( %s ) vs new( %s )", this.props.widget.name, this.props.widget.likes.length, newProps.widget.likes.length ); return( true ); // Should update. } }); // --------------------------------------------------------------------------- // // --------------------------------------------------------------------------- // // Render the root Demo and mount it inside the given element. React.render( , document.getElementById( "content" ) );