I've got a jsbin for this issue here: http://jsbin.com/tekuluve/1/edit

In an onClick event I'm removing an element from the model, and re-rendering the app. But strangely, in componentWillReceiveProps() (and componentWillUpdate, and componentDidUpdate too), nextProps is always === to this.props, regardless of what I do.

/** @jsx React.DOM */

var Box = React.createClass({

  render: function() {

    return (

      <div className=box onClick={ UpdateModel }>

        { this.props.label }

      </div>

    );

  }

});



var Grid = React.createClass({

  componentWillReceiveProps: function(nextProps) {      

    // WTF is going on here???

    console.log(nextProps.boxes === this.props.boxes)        

  },

  render: function() {

    var boxes = _.map(this.props.boxes, function(d) {

      return (<Box label={ d.number } />);

    });



    return (

      <div className=grid>

        { boxes }

      </div>

    );

  }

});



var model = [

  { number: 1 },

  { number: 2 },

  { number: 3 },

  { number: 4 },

  { number: 5 }

];



function UpdateModel() {

  React.renderComponent(

    <Grid boxes={ _.pull(model, _.sample(model)) } />,

    document.body

  );

}



React.renderComponent(

  <Grid boxes={ model } />,

  document.body

);

I need nextProps to be different to this.props after it has been updated via UpdateModel(), in the componentWillReceiveProps() lifecycle event.