Anim.jsx

/** @jsx React.DOM */

'use strict';

var Group = React.addons.TransitionGroup;

var Item = React.createClass({
  componentWillEnter: function(done) {
    this.props.componentWillEnter();
    done();
  },

  componentDidEnter: function() {
    this.props.componentDidEnter();
  },

  componentWillLeave: function(done) {
    this.props.componentWillLeave();
    done();
  },

  componentDidLeave: function() {
    this.props.componentDidLeave();
  },

  render: function() {
    return <div>{this.props.title}</div>;
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      items: [1, 2, 3]
    };
  },

  componentDidMount: function() {
    setTimeout(function() {
      this.setState({
        items: [0, 1, 2, 3]
      });
    }.bind(this), 1000);
    setTimeout(function() {
      this.setState({
        items: [0, 2, 3]
      });
    }.bind(this), 2000);

    console.log(this.refs.group.props.children[0]._lifeCycleState); // unmounted
  },

  handleComponentWillEnter: function() {
    // outputs [0, 1, 2, 3]
    // expected [1, 2, 3]
    // see willLeave
    console.log('WillEnter', this.state.items);
  },

  handleComponentDidEnter: function() {
    // right
    console.log('DidEnter', this.state.items);
  },

  handleComponentWillLeave: function() {
    // outputs [0, 2, 3]
    // expected [0, 1, 2, 3]
    // basing calculations on this.state.items would do the wrong thing
    // what if I want to loop through the items and... blabla
    console.log('WillLeave', this.state.items);
  },

  handleComponentDidLeave: function() {
    // right
    console.log('DidLeave', this.state.items);
  },

  render: function() {
    return (
      <Group ref="group">
        {
          this.state.items.map(function(item, i) {
            return (
              <Item
                ref={i}
                title={item}
                componentWillEnter={this.handleComponentWillEnter}
                componentDidEnter={this.handleComponentDidEnter}
                componentWillLeave={this.handleComponentWillLeave}
                componentDidLeave={this.handleComponentDidLeave}>
                  {item}
              </Item>
            );
          }, this)
        }
      </Group>
    );
  }
});

React.renderComponent(<App />, document.body);