Use setState transaction for TransitionGroup instead of extra property

Author: sophiebits

src/addons/transitions/ReactTransitionGroup.js

@@ -89,8 +89,6 @@ var ReactTransitionGroup = React.createClass({
   },
 
   componentDidUpdate: function() {
-    this.updatedChildren = null;
-
     var keysToEnter = this.keysToEnter;
     this.keysToEnter = [];
     keysToEnter.forEach(this.performEnter);
@@ -195,13 +193,11 @@ var ReactTransitionGroup = React.createClass({
       // This entered again before it fully left. Add it again.
       this.performEnter(key);
     } else {
-      // As this.state.children will not be updated until next render, we keep 
-      // this.updatedChildren state to avoid losing all but the last removal. 
-      // It's cleaned after this.state is updated, in componentDidUpdate.
-      if (!this.updatedChildren)
-        this.updatedChildren = assign({}, this.state.children);
-      delete this.updatedChildren[key];
-      this.setState({children: this.updatedChildren});
+      this.setState(function(state) {
+        var newChildren = assign({}, state.children);
+        delete newChildren[key];
+        return {children: newChildren};
+      });
     }
   },
 

src/addons/transitions/__tests__/ReactTransitionGroup-test.js

@@ -215,24 +215,24 @@ describe('ReactTransitionGroup', function() {
 
     var Child = React.createClass({
       componentDidMount: function() {
-        log.push('didMount'+this.props.id);
+        log.push('didMount' + this.props.id);
       },
       componentWillEnter: function(cb) {
-        log.push('willEnter'+this.props.id);
+        log.push('willEnter' + this.props.id);
         cb();
       },
       componentDidEnter: function() {
-        log.push('didEnter'+this.props.id);
+        log.push('didEnter' + this.props.id);
       },
       componentWillLeave: function(cb) {
-        log.push('willLeave'+this.props.id);
+        log.push('willLeave' + this.props.id);
         cb();
       },
       componentDidLeave: function() {
-        log.push('didLeave'+this.props.id);
+        log.push('didLeave' + this.props.id);
       },
       componentWillUnmount: function() {
-        log.push('willUnmount'+this.props.id);
+        log.push('willUnmount' + this.props.id);
       },
       render: function() {
         return <span />;
@@ -258,14 +258,14 @@ describe('ReactTransitionGroup', function() {
 
     instance.setState({count: 3});
     expect(log).toEqual([
-      'didMount1', 'didMount2', 'willEnter1', 'didEnter1', 
+      'didMount1', 'didMount2', 'willEnter1', 'didEnter1',
       'willEnter2', 'didEnter2'
     ]);
     log = [];
 
     instance.setState({count: 0});
     expect(log).toEqual([
-      'willLeave0', 'didLeave0', 'willLeave1', 'didLeave1', 
+      'willLeave0', 'didLeave0', 'willLeave1', 'didLeave1',
       'willLeave2', 'didLeave2', 'willUnmount0', 'willUnmount1', 'willUnmount2'
     ]);
   });