From 08e4420019f74b7c93e64f59c443970359102530 Mon Sep 17 00:00:00 2001
From: Ben Alpert <balpert@fb.com>
Date: Wed, 1 Apr 2015 14:32:22 -0700
Subject: [PATCH] Use setState transaction for TransitionGroup instead of extra
 property

---
 src/addons/transitions/ReactTransitionGroup.js   | 14 +++++---------
 .../__tests__/ReactTransitionGroup-test.js       | 16 ++++++++--------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js
index 501d518b1a54c..48a78157154c4 100644
--- a/src/addons/transitions/ReactTransitionGroup.js
+++ b/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};
+      });
     }
   },
 
diff --git a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
index 2e315d28184e8..f14d546bb68b7 100644
--- a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+++ b/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'
     ]);
   });