fix(Transition): Stale nodes in transition callbacks

Author: eps1lon

src/Transition.js

@@ -222,19 +222,18 @@ class Transition extends React.Component {
     if (nextStatus !== null) {
       // nextStatus will always be ENTERING or EXITING.
       this.cancelNextCallback()
-      const node = ReactDOM.findDOMNode(this)
 
       if (nextStatus === ENTERING) {
-        this.performEnter(node, mounting)
+        this.performEnter(mounting)
       } else {
-        this.performExit(node)
+        this.performExit()
       }
     } else if (this.props.unmountOnExit && this.state.status === EXITED) {
       this.setState({ status: UNMOUNTED })
     }
   }
 
-  performEnter(node, mounting) {
+  performEnter(mounting) {
     const { enter } = this.props
     const appearing = this.context.transitionGroup
       ? this.context.transitionGroup.isMounting
@@ -246,43 +245,43 @@ class Transition extends React.Component {
     // if we are mounting and running this it means appear _must_ be set
     if (!mounting && !enter) {
       this.safeSetState({ status: ENTERED }, () => {
-        this.props.onEntered(node)
+        this.props.onEntered(ReactDOM.findDOMNode(this))
       })
       return
     }
 
-    this.props.onEnter(node, appearing)
+    this.props.onEnter(ReactDOM.findDOMNode(this), appearing)
 
     this.safeSetState({ status: ENTERING }, () => {
-      this.props.onEntering(node, appearing)
+      this.props.onEntering(ReactDOM.findDOMNode(this), appearing)
 
-      this.onTransitionEnd(node, enterTimeout, () => {
+      this.onTransitionEnd(enterTimeout, () => {
         this.safeSetState({ status: ENTERED }, () => {
-          this.props.onEntered(node, appearing)
+          this.props.onEntered(ReactDOM.findDOMNode(this), appearing)
         })
       })
     })
   }
 
-  performExit(node) {
+  performExit() {
     const { exit } = this.props
     const timeouts = this.getTimeouts()
 
     // no exit animation skip right to EXITED
     if (!exit) {
       this.safeSetState({ status: EXITED }, () => {
-        this.props.onExited(node)
+        this.props.onExited(ReactDOM.findDOMNode(this))
       })
       return
     }
-    this.props.onExit(node)
+    this.props.onExit(ReactDOM.findDOMNode(this))
 
     this.safeSetState({ status: EXITING }, () => {
-      this.props.onExiting(node)
+      this.props.onExiting(ReactDOM.findDOMNode(this))
 
-      this.onTransitionEnd(node, timeouts.exit, () => {
+      this.onTransitionEnd(timeouts.exit, () => {
         this.safeSetState({ status: EXITED }, () => {
-          this.props.onExited(node)
+          this.props.onExited(ReactDOM.findDOMNode(this))
         })
       })
     })
@@ -322,7 +321,8 @@ class Transition extends React.Component {
     return this.nextCallback
   }
 
-  onTransitionEnd(node, timeout, handler) {
+  onTransitionEnd(timeout, handler) {
+    const node = ReactDOM.findDOMNode(this);
     this.setNextCallback(handler)
 
     const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener

test/Transition-test.js

@@ -465,13 +465,13 @@ describe('Transition', () => {
   })
 
   describe('node in callbacks', () => {
-    it('use stale nodes', done => {
+    it('does not use stale nodes', done => {
       const enteringNode = React.createRef();
       const enteredNode = React.createRef();
 
       function makeAssertions() {
-        expect(enteringNode.current.nodeName).toBe('H1');
-        expect(enteredNode.current.nodeName).toBe('H1');
+        expect(enteringNode.current.nodeName).toBe('H2');
+        expect(enteredNode.current.nodeName).toBe('H3');
 
         done();
       }