diff --git a/.storybook/config.js b/.storybook/config.js
index 9154670a..6fcf7bfa 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,9 @@
-import { configure } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
+import React from 'react';
+
+addDecorator(
+  storyFn => <React.StrictMode>{storyFn()}</React.StrictMode>,
+)
 
 function loadStories() {
   require('../stories');
diff --git a/src/CSSTransition.js b/src/CSSTransition.js
index 58de70ad..d0240b62 100644
--- a/src/CSSTransition.js
+++ b/src/CSSTransition.js
@@ -90,61 +90,72 @@ class CSSTransition extends React.Component {
     exit: {},
   }
 
-  onEnter = (node, appearing) => {
+  onEnter = (maybeNode, maybeAppearing) => {
+    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing)
     this.removeClasses(node, 'exit');
     this.addClass(node, appearing ? 'appear' : 'enter', 'base');
 
     if (this.props.onEnter) {
-      this.props.onEnter(node, appearing)
+      this.props.onEnter(maybeNode, maybeAppearing)
     }
   }
 
-  onEntering = (node, appearing) => {
+  onEntering = (maybeNode, maybeAppearing) => {
+    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing)
     const type = appearing ? 'appear' : 'enter';
     this.addClass(node, type, 'active')
 
     if (this.props.onEntering) {
-      this.props.onEntering(node, appearing)
+      this.props.onEntering(maybeNode, maybeAppearing)
     }
   }
 
-  onEntered = (node, appearing) => {
+  onEntered = (maybeNode, maybeAppearing) => {
+    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing)
     const type = appearing ? 'appear' : 'enter'
     this.removeClasses(node, type);
     this.addClass(node, type, 'done');
 
     if (this.props.onEntered) {
-      this.props.onEntered(node, appearing)
+      this.props.onEntered(maybeNode, maybeAppearing)
     }
   }
 
-  onExit = (node) => {
+  onExit = (maybeNode) => {
+    const [node] = this.resolveArguments(maybeNode)
     this.removeClasses(node, 'appear');
     this.removeClasses(node, 'enter');
     this.addClass(node, 'exit', 'base')
 
     if (this.props.onExit) {
-      this.props.onExit(node)
+      this.props.onExit(maybeNode)
     }
   }
 
-  onExiting = (node) => {
+  onExiting = (maybeNode) => {
+    const [node] = this.resolveArguments(maybeNode)
     this.addClass(node, 'exit', 'active')
 
     if (this.props.onExiting) {
-      this.props.onExiting(node)
+      this.props.onExiting(maybeNode)
     }
   }
 
-  onExited = (node) => {
+  onExited = (maybeNode) => {
+    const [node] = this.resolveArguments(maybeNode)
     this.removeClasses(node, 'exit');
     this.addClass(node, 'exit', 'done');
 
     if (this.props.onExited) {
-      this.props.onExited(node)
+      this.props.onExited(maybeNode)
     }
   }
 
+  // when prop `nodeRef` is provided `node` is excluded
+  resolveArguments = (maybeNode, maybeAppearing) => this.props.nodeRef
+    ? [this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
+    : [maybeNode, maybeAppearing] // `findDOMNode` was used
+
   getClassNames = (type) => {
     const { classNames } = this.props;
     const isStringClassNames = typeof classNames === 'string';
@@ -306,6 +317,8 @@ CSSTransition.propTypes = {
    * A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
    * applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
   onEnter: PropTypes.func,
@@ -314,6 +327,8 @@ CSSTransition.propTypes = {
    * A `<Transition>` callback fired immediately after the 'enter-active' or
    * 'appear-active' class is applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
   onEntering: PropTypes.func,
@@ -322,6 +337,8 @@ CSSTransition.propTypes = {
    * A `<Transition>` callback fired immediately after the 'enter' or
    * 'appear' classes are **removed** and the `done` class is added to the DOM node.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
   onEntered: PropTypes.func,
@@ -330,6 +347,8 @@ CSSTransition.propTypes = {
    * A `<Transition>` callback fired immediately after the 'exit' class is
    * applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
    * @type Function(node: HtmlElement)
    */
   onExit: PropTypes.func,
@@ -337,6 +356,8 @@ CSSTransition.propTypes = {
   /**
    * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
    * @type Function(node: HtmlElement)
    */
   onExiting: PropTypes.func,
@@ -345,6 +366,8 @@ CSSTransition.propTypes = {
    * A `<Transition>` callback fired immediately after the 'exit' classes
    * are **removed** and the `exit-done` class is added to the DOM node.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
    * @type Function(node: HtmlElement)
    */
   onExited: PropTypes.func,
diff --git a/src/ReplaceTransition.js b/src/ReplaceTransition.js
index 1eea0259..746ed8d7 100644
--- a/src/ReplaceTransition.js
+++ b/src/ReplaceTransition.js
@@ -28,7 +28,13 @@ class ReplaceTransition extends React.Component {
     const child = React.Children.toArray(children)[idx];
 
     if (child.props[handler]) child.props[handler](...originalArgs)
-    if (this.props[handler]) this.props[handler](ReactDOM.findDOMNode(this))
+    if (this.props[handler]) {
+      const maybeNode = child.props.nodeRef
+        ? undefined
+        : ReactDOM.findDOMNode(this)
+
+      this.props[handler](maybeNode)
+    }
   }
 
   render() {
diff --git a/src/Transition.js b/src/Transition.js
index d3c7a87e..116852e3 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -210,21 +210,23 @@ 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 ? this.context.isMounting : mounting
+    const [maybeNode, maybeAppearing] = this.props.nodeRef
+      ? [appearing]
+      : [ReactDOM.findDOMNode(this), appearing]
 
     const timeouts = this.getTimeouts()
     const enterTimeout = appearing ? timeouts.appear : timeouts.enter
@@ -232,43 +234,47 @@ class Transition extends React.Component {
     // if we are mounting and running this it means appear _must_ be set
     if ((!mounting && !enter) || config.disabled) {
       this.safeSetState({ status: ENTERED }, () => {
-        this.props.onEntered(node)
+        this.props.onEntered(maybeNode)
       })
       return
     }
 
-    this.props.onEnter(node, appearing)
+    this.props.onEnter(maybeNode, maybeAppearing)
 
     this.safeSetState({ status: ENTERING }, () => {
-      this.props.onEntering(node, appearing)
+      this.props.onEntering(maybeNode, maybeAppearing)
 
-      this.onTransitionEnd(node, enterTimeout, () => {
+      this.onTransitionEnd(enterTimeout, () => {
         this.safeSetState({ status: ENTERED }, () => {
-          this.props.onEntered(node, appearing)
+          this.props.onEntered(maybeNode, maybeAppearing)
         })
       })
     })
   }
 
-  performExit(node) {
+  performExit() {
     const { exit } = this.props
     const timeouts = this.getTimeouts()
+    const maybeNode = this.props.nodeRef
+      ? undefined
+      : ReactDOM.findDOMNode(this)
 
     // no exit animation skip right to EXITED
     if (!exit || config.disabled) {
       this.safeSetState({ status: EXITED }, () => {
-        this.props.onExited(node)
+        this.props.onExited(maybeNode)
       })
       return
     }
-    this.props.onExit(node)
+
+    this.props.onExit(maybeNode)
 
     this.safeSetState({ status: EXITING }, () => {
-      this.props.onExiting(node)
+      this.props.onExiting(maybeNode)
 
-      this.onTransitionEnd(node, timeouts.exit, () => {
+      this.onTransitionEnd(timeouts.exit, () => {
         this.safeSetState({ status: EXITED }, () => {
-          this.props.onExited(node)
+          this.props.onExited(maybeNode)
         })
       })
     })
@@ -308,8 +314,11 @@ class Transition extends React.Component {
     return this.nextCallback
   }
 
-  onTransitionEnd(node, timeout, handler) {
+  onTransitionEnd(timeout, handler) {
     this.setNextCallback(handler)
+    const node = this.props.nodeRef
+      ? this.props.nodeRef.current
+      : ReactDOM.findDOMNode(this)
 
     const doesNotHaveTimeoutOrListener =
       timeout == null && !this.props.addEndListener
@@ -319,7 +328,10 @@ class Transition extends React.Component {
     }
 
     if (this.props.addEndListener) {
-      this.props.addEndListener(node, this.nextCallback)
+      const [maybeNode, maybeNextCallback] = this.props.nodeRef
+        ? [this.nextCallback]
+        : [node, this.nextCallback]
+      this.props.addEndListener(maybeNode, maybeNextCallback)
     }
 
     if (timeout != null) {
@@ -349,6 +361,7 @@ class Transition extends React.Component {
     delete childProps.onExit
     delete childProps.onExiting
     delete childProps.onExited
+    delete childProps.nodeRef
 
     if (typeof children === 'function') {
       // allows for nested Transitions
@@ -370,6 +383,19 @@ class Transition extends React.Component {
 }
 
 Transition.propTypes = {
+  /**
+   * A React reference to DOM element that need to transition:
+   * https://stackoverflow.com/a/51127130/4671932
+   *
+   *   - When `nodeRef` prop is used, `node` is not passed to callback functions
+   *      (e.g. `onEnter`) because user already has direct access to the node.
+   *   - When changing `key` prop of `Transition` in a `TransitionGroup` a new
+   *     `nodeRef` need to be provided to `Transition` with changed `key` prop
+   *     (see
+   *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
+   */
+  nodeRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+
   /**
    * A `function` child can be used instead of a React element. This function is
    * called with the current transition status (`'entering'`, `'entered'`,
@@ -466,7 +492,9 @@ Transition.propTypes = {
   /**
    * Add a custom transition end trigger. Called with the transitioning
    * DOM node and a `done` callback. Allows for more fine grained transition end
-   * logic. **Note:** Timeouts are still used as a fallback if provided.
+   * logic. Timeouts are still used as a fallback if provided.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
    *
    * ```jsx
    * addEndListener={(node, done) => {
@@ -481,6 +509,8 @@ Transition.propTypes = {
    * Callback fired before the "entering" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
   onEnter: PropTypes.func,
@@ -489,6 +519,8 @@ Transition.propTypes = {
    * Callback fired after the "entering" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
   onEntering: PropTypes.func,
@@ -497,6 +529,8 @@ Transition.propTypes = {
    * Callback fired after the "entered" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
   onEntered: PropTypes.func,
@@ -504,6 +538,8 @@ Transition.propTypes = {
   /**
    * Callback fired before the "exiting" status is applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement) -> void
    */
   onExit: PropTypes.func,
@@ -511,6 +547,8 @@ Transition.propTypes = {
   /**
    * Callback fired after the "exiting" status is applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
    * @type Function(node: HtmlElement) -> void
    */
   onExiting: PropTypes.func,
@@ -518,6 +556,8 @@ Transition.propTypes = {
   /**
    * Callback fired after the "exited" status is applied.
    *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
    * @type Function(node: HtmlElement) -> void
    */
   onExited: PropTypes.func,
diff --git a/src/TransitionGroup.js b/src/TransitionGroup.js
index eec05197..bda2f82b 100644
--- a/src/TransitionGroup.js
+++ b/src/TransitionGroup.js
@@ -66,6 +66,7 @@ class TransitionGroup extends React.Component {
     }
   }
 
+  // node is `undefined` when user provided `nodeRef` prop
   handleExited(child, node) {
     let currentChildMapping = getChildMapping(this.props.children)
 
diff --git a/stories/CSSTransitionGroupFixture.js b/stories/CSSTransitionGroupFixture.js
index 2b3ac0c0..cc2e503f 100644
--- a/stories/CSSTransitionGroupFixture.js
+++ b/stories/CSSTransitionGroupFixture.js
@@ -1,18 +1,16 @@
-import React from 'react';
+import React from 'react'
 
 import TransitionGroup from '../src/TransitionGroup';
 import StoryFixture from './StoryFixture';
 
 class CSSTransitionGroupFixture extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    let items = props.items || [];
+  static defaultProps = {
+    items: []
+  }
 
-    this.count = items.length;
-    this.state = {
-      items,
-    };
+  count = this.props.items.length
+  state = {
+    items: this.props.items
   }
 
   handleAddItem = () => {
@@ -39,7 +37,9 @@ class CSSTransitionGroupFixture extends React.Component {
   }
 
   render() {
-    const { items: _, description, children, ...props } = this.props;
+    const { items: _, description, children, ...rest } = this.props;
+    // e.g. `Fade`, see where `CSSTransitionGroupFixture` is used
+    const { type: TransitionType, props: transitionTypeProps } = React.Children.only(children)
 
     return (
       <StoryFixture description={description}>
@@ -52,18 +52,13 @@ class CSSTransitionGroupFixture extends React.Component {
             Remove a few
           </button>
         </div>
-        <TransitionGroup component="div" {...props}>
-          {this.state.items.map(item => React.cloneElement(children, {
-            key: item,
-            children: (
-              <div>
-                {item}
-                <button onClick={() => this.handleRemoveItem(item)}>
-                  &times;
-                </button>
-              </div>
-            )
-          }))}
+        <TransitionGroup component="div" {...rest}>
+          {this.state.items.map(item => (
+            <TransitionType {...transitionTypeProps} key={item}>
+              {item}
+              <button onClick={() => this.handleRemoveItem(item)}>&times;</button>
+            </TransitionType>
+          ))}
         </TransitionGroup>
       </StoryFixture>
     );
diff --git a/stories/NestedTransition.js b/stories/NestedTransition.js
index 7e6f2905..34e987ea 100644
--- a/stories/NestedTransition.js
+++ b/stories/NestedTransition.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react'
 
 import StoryFixture from './StoryFixture';
 import Fade from './transitions/Fade';
@@ -7,9 +7,8 @@ import Scale from './transitions/Scale';
 function FadeAndScale(props) {
   return (
     <Fade {...props}>
-      <div>
-        <div>I will fade</div>
-        {/*
+      <div>I will fade</div>
+      {/*
           We also want to scale in at the same time so we pass the `in` state here as well, so it enters
           at the same time as the Fade.
 
@@ -17,10 +16,9 @@ function FadeAndScale(props) {
           will mount at the same time as the div we want to scale, so we need to tell it to animate as
           it _appears_.
         */}
-        <Scale in={props.in} appear>
-          <div>I should scale</div>
-        </Scale>
-      </div>
+      <Scale in={props.in} appear>
+        I should scale
+      </Scale>
     </Fade>
   );
 }
diff --git a/stories/ReplaceTransition.js b/stories/ReplaceTransition.js
index 22e397c6..9f6a0399 100644
--- a/stories/ReplaceTransition.js
+++ b/stories/ReplaceTransition.js
@@ -40,7 +40,6 @@ const styles = css`
 
 const defaultProps = {
   in: false,
-  delay: false,
   timeout: FADE_TIMEOUT * 2,
 }
 
@@ -56,8 +55,6 @@ function Fade(props) {
 
 Fade.defaultProps = defaultProps;
 
-export default Fade;
-
 function Example({ children }) {
   const [show, setShow] = useState(false);
 
@@ -77,20 +74,27 @@ function Example({ children }) {
 
 
 storiesOf('Replace Transition', module)
-  .add('Animates on all', () => (
-
-    <Example>
-      <ReplaceTransition
-        className={styles.container}
-        onEnter={() => console.log('onEnter')}
-        onEntering={() => console.log('onEntering')}
-        onEntered={() => console.log('onEntered')}
-        onExit={() => console.log('onExit')}
-        onExiting={() => console.log('onExiting')}
-        onExited={() => console.log('onExited')}
-      >
-        <Fade><div>in True</div></Fade>
-        <Fade><div>in False</div></Fade>
-      </ReplaceTransition>
-    </Example>
-  ))
+  .add('Animates on all', () => {
+    const firstNodeRef = React.createRef()
+    const secondNodeRef = React.createRef()
+    return (
+      <Example>
+        <ReplaceTransition
+          in={false} // `Example` is overriding this prop
+          className={styles.container}
+          onEnter={() => console.log('onEnter')}
+          onEntering={() => console.log('onEntering')}
+          onEntered={() => console.log('onEntered')}
+          onExit={() => console.log('onExit')}
+          onExiting={() => console.log('onExiting')}
+          onExited={() => console.log('onExited')}>
+          <Fade nodeRef={firstNodeRef}>
+            <div ref={firstNodeRef}>in True</div>
+          </Fade>
+          <Fade nodeRef={secondNodeRef}>
+            <div ref={secondNodeRef}>in False</div>
+          </Fade>
+        </ReplaceTransition>
+      </Example>
+    )
+  })
diff --git a/stories/Transition.js b/stories/Transition.js
index e12d0b60..21df6adf 100644
--- a/stories/Transition.js
+++ b/stories/Transition.js
@@ -2,17 +2,17 @@ import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
 
 import StoryFixture from './StoryFixture'
-import { Fade, Collapse } from './transitions/Bootstrap'
+import { Fade, Collapse, FadeForwardRef, FadeInnerRef } from './transitions/Bootstrap'
 
 function ToggleFixture({ defaultIn, description, children }) {
-  const [show, setShow] = useState(defaultIn);
+  const [show, setShow] = useState(defaultIn)
 
   return (
     <StoryFixture description={description}>
       <div style={{ marginBottom: 10 }}>
         <button
           onClick={() => {
-            setShow(!show);
+            setShow(!show)
           }}
         >
           Toggle
@@ -20,25 +20,38 @@ function ToggleFixture({ defaultIn, description, children }) {
       </div>
       {React.cloneElement(children, { in: show })}
     </StoryFixture>
-  );
+  )
 }
 
 storiesOf('Transition', module)
   .add('Bootstrap Fade', () => (
     <ToggleFixture>
-      <Fade>
-        <div>asaghasg asgasg</div>
-      </Fade>
+      <Fade>asaghasg asgasg</Fade>
     </ToggleFixture>
   ))
   .add('Bootstrap Collapse', () => (
     <ToggleFixture>
       <Collapse>
-        <div>
-          asaghasg asgasg
-          <div>foo</div>
-          <div>bar</div>
-        </div>
+        asaghasg asgasg
+        <div>foo</div>
+        <div>bar</div>
       </Collapse>
     </ToggleFixture>
   ))
+  .add('Fade using React.forwardRef', () => {
+    const nodeRef = React.createRef()
+    return (
+      <ToggleFixture>
+        <FadeForwardRef ref={nodeRef}>Fade using React.forwardRef</FadeForwardRef>
+      </ToggleFixture>
+    )
+  })
+  .add('Fade using innerRef', () => {
+    const nodeRef = React.createRef()
+    return (
+      <ToggleFixture>
+        <FadeInnerRef innerRef={nodeRef}>Fade using innerRef</FadeInnerRef>
+      </ToggleFixture>
+    )
+  })
+
diff --git a/stories/TransitionGroup.js b/stories/TransitionGroup.js
index 17bba6e6..d7447597 100644
--- a/stories/TransitionGroup.js
+++ b/stories/TransitionGroup.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react'
 import { storiesOf } from '@storybook/react';
 
 import TransitionGroup from '../src/TransitionGroup';
@@ -106,11 +106,7 @@ class DynamicTransition extends React.Component {
       <div>
         <button onClick={this.handleClick}>Toggle item</button>
         <TransitionGroup timeout={FADE_TIMEOUT}>
-          {!hide &&
-            <Fade key='item'>
-              <div>Changing! {count}</div>
-            </Fade>
-          }
+          {!hide && <Fade key='item'>Changing! {count}</Fade>}
         </TransitionGroup>
       </div>
     )
@@ -140,9 +136,7 @@ function ReEnterTransition() {
       </button>
       <TransitionGroup timeout={FADE_TIMEOUT}>
         {!hide && (
-          <Fade key='item'>
-            <div>I'm entering!</div>
-          </Fade>
+          <Fade key='item'>I'm entering!</Fade>
         )}
       </TransitionGroup>
     </div>
diff --git a/stories/transitions/Bootstrap.js b/stories/transitions/Bootstrap.js
index ae98f597..78232e3a 100644
--- a/stories/transitions/Bootstrap.js
+++ b/stories/transitions/Bootstrap.js
@@ -1,5 +1,5 @@
 import { css } from 'astroturf';
-import React from 'react';
+import React, { useEffect, useRef } from 'react'
 import style from 'dom-helpers/css';
 
 import Transition, { EXITED, ENTERED, ENTERING, EXITING }
@@ -35,17 +35,23 @@ const fadeStyles = {
   [ENTERED]: styles.in,
 }
 
-export const Fade = props => (
-  <Transition
-    {...props}
-    className={styles.fade}
-    timeout={150}
-  >
-    {status => React.cloneElement(props.children, {
-      className: `${styles.fade} ${fadeStyles[status] || ''}`
-    })}
-  </Transition>
-)
+export function Fade(props) {
+  const nodeRef = useRef()
+  return (
+    <Transition
+      {...props}
+      nodeRef={nodeRef}
+      className={styles.fade}
+      timeout={150}
+    >
+      {status => (
+        <div ref={nodeRef} className={`${styles.fade} ${fadeStyles[status] || ''}`}>
+          {props.children}
+        </div>
+      )}
+    </Transition>
+  )
+}
 
 function getHeight(elem) {
   let value = elem.offsetHeight;
@@ -66,46 +72,93 @@ const collapseStyles = {
 }
 
 export class Collapse extends React.Component {
+  nodeRef = React.createRef()
+
   /* -- Expanding -- */
-  handleEnter = (elem) => {
-    elem.style.height = '0';
+  handleEnter = () => {
+    this.nodeRef.current.style.height = '0';
   }
 
-  handleEntering = (elem) => {
-    elem.style.height = `${elem.scrollHeight}px`;
+  handleEntering = () => {
+    this.nodeRef.current.style.height = `${this.nodeRef.current.scrollHeight}px`;
   }
 
-  handleEntered = (elem) => {
-    elem.style.height = null;
+  handleEntered = () => {
+    this.nodeRef.current.style.height = null;
   }
 
   /* -- Collapsing -- */
-  handleExit = (elem) => {
-    elem.style.height = getHeight(elem) + 'px';
-    elem.offsetHeight; // eslint-disable-line no-unused-expressions
+  handleExit = () => {
+    this.nodeRef.current.style.height = getHeight(this.nodeRef.current) + 'px';
+    this.nodeRef.current.offsetHeight; // eslint-disable-line no-unused-expressions
   }
 
-  handleExiting = (elem) => {
-    elem.style.height = '0';
+  handleExiting = () => {
+    this.nodeRef.current.style.height = '0';
   }
 
   render() {
-    const { children } = this.props;
+    const { children, ...rest } = this.props;
     return (
       <Transition
-        {...this.props}
+        {...rest}
+        nodeRef={this.nodeRef}
         timeout={350}
         onEnter={this.handleEnter}
         onEntering={this.handleEntering}
         onEntered={this.handleEntered}
         onExit={this.handleExit}
-        onExiting={this.handleExiting}
-      >
-        {(state, props) => React.cloneElement(children, {
-          ...props,
-          className: collapseStyles[state]
-        })}
+        onExiting={this.handleExiting}>
+        {(state, props) => (
+          <div ref={this.nodeRef} className={collapseStyles[state]} {...props}>
+            {children}
+          </div>
+        )}
       </Transition>
     );
   }
 }
+
+export function FadeInnerRef(props) {
+  const nodeRef = useMergedRef(props.innerRef)
+  return (
+    <Transition
+      {...props}
+      nodeRef={nodeRef}
+      className={styles.fade}
+      timeout={150}>
+      {status => (
+        <div ref={nodeRef} className={`${styles.fade} ${fadeStyles[status] || ''}`}>
+          {props.children}
+        </div>
+      )}
+    </Transition>
+  )
+}
+
+export const FadeForwardRef = React.forwardRef((props, ref) => {
+  return <FadeInnerRef {...props} innerRef={ref} />
+})
+
+/**
+ * Compose multiple refs, there may be different implementations
+ * This one is derived from
+ * e.g. https://github.com/react-restart/hooks/blob/ed37bf3dfc8fc1d9234a6d8fe0af94d69fad3b74/src/useMergedRefs.ts
+ * Also here are good discussion about this
+ * https://github.com/facebook/react/issues/13029
+ * @param ref
+ * @returns {React.MutableRefObject<undefined>}
+ */
+function useMergedRef(ref) {
+  const nodeRef = React.useRef()
+  useEffect(function () {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(nodeRef.current)
+      } else {
+        ref.current = nodeRef.current
+      }
+    }
+  })
+  return nodeRef
+}
diff --git a/stories/transitions/Fade.js b/stories/transitions/Fade.js
index d8e9c360..4a3937f8 100644
--- a/stories/transitions/Fade.js
+++ b/stories/transitions/Fade.js
@@ -1,5 +1,5 @@
 import { css } from 'astroturf';
-import React from 'react';
+import React, { useRef } from 'react'
 
 import CSSTransition from '../../src/CSSTransition';
 
@@ -32,7 +32,12 @@ const defaultProps = {
 };
 
 function Fade(props) {
-  return <CSSTransition {...props} classNames={styles} />;
+  const nodeRef = useRef()
+  return (
+    <CSSTransition {...props} classNames={styles} nodeRef={nodeRef}>
+      <div ref={nodeRef}>{props.children}</div>
+    </CSSTransition>
+  );
 }
 
 Fade.defaultProps = defaultProps;
diff --git a/stories/transitions/Scale.js b/stories/transitions/Scale.js
index cd46f361..7a8fffd7 100644
--- a/stories/transitions/Scale.js
+++ b/stories/transitions/Scale.js
@@ -1,5 +1,5 @@
 import { css } from 'astroturf';
-import React from 'react';
+import React, { useRef } from 'react'
 
 import CSSTransition from '../../src/CSSTransition';
 
@@ -32,7 +32,12 @@ const defaultProps = {
 };
 
 function Scale(props) {
-  return <CSSTransition {...props} classNames={styles} />;
+  const nodeRef = useRef()
+  return (
+    <CSSTransition {...props} classNames={styles} nodeRef={nodeRef}>
+      <div ref={nodeRef}>{props.children}</div>
+    </CSSTransition>
+  );
 }
 
 Scale.defaultProps = defaultProps;
diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js
index 3e5f9761..59fa557c 100644
--- a/test/CSSTransition-test.js
+++ b/test/CSSTransition-test.js
@@ -7,40 +7,43 @@ import TransitionGroup from '../src/TransitionGroup';
 describe('CSSTransition', () => {
 
   it('should flush new props to the DOM before initiating a transition', (done) => {
-    mount(
+    const nodeRef = React.createRef()
+    const wrapper = mount(
       <CSSTransition
         in={false}
+        nodeRef={nodeRef}
         timeout={0}
         classNames="test"
-        onEnter={node => {
-          expect(node.classList.contains('test-class')).toEqual(true)
-          expect(node.classList.contains('test-entering')).toEqual(false)
+        onEnter={() => {
+          expect(nodeRef.current.classList.contains('test-class')).toEqual(true)
+          expect(nodeRef.current.classList.contains('test-entering')).toEqual(false)
           done()
         }}
       >
-        <div></div>
+        <div ref={nodeRef} />
       </CSSTransition>
     )
-    .tap(inst => {
 
-      expect(inst.getDOMNode().classList.contains('test-class')).toEqual(false)
-    })
-    .setProps({
+    expect(nodeRef.current.classList.contains('test-class')).toEqual(false)
+
+    wrapper.setProps({
       in: true,
       className: 'test-class'
     })
   });
 
   describe('entering', () => {
-    let instance;
+    let wrapper, nodeRef;
 
     beforeEach(() => {
-      instance = mount(
+      nodeRef = React.createRef()
+      wrapper = mount(
         <CSSTransition
+          nodeRef={nodeRef}
           timeout={10}
           classNames="test"
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       )
     });
@@ -48,21 +51,21 @@ describe('CSSTransition', () => {
     it('should apply classes at each transition state', done => {
       let count = 0;
 
-      instance.setProps({
+      wrapper.setProps({
         in: true,
 
-        onEnter(node) {
+        onEnter() {
           count++;
-          expect(node.className).toEqual('test-enter');
+          expect(nodeRef.current.className).toEqual('test-enter');
         },
 
-        onEntering(node){
+        onEntering() {
           count++;
-          expect(node.className).toEqual('test-enter test-enter-active');
+          expect(nodeRef.current.className).toEqual('test-enter test-enter-active');
         },
 
-        onEntered(node){
-          expect(node.className).toEqual('test-enter-done');
+        onEntered() {
+          expect(nodeRef.current.className).toEqual('test-enter-done');
           expect(count).toEqual(2);
           done();
         }
@@ -71,34 +74,36 @@ describe('CSSTransition', () => {
 
     it('should apply custom classNames names', done => {
       let count = 0;
-      instance = mount(
+      const nodeRef = React.createRef()
+      wrapper = mount(
         <CSSTransition
           timeout={10}
+          nodeRef={nodeRef}
           classNames={{
             enter: 'custom',
             enterActive: 'custom-super-active',
             enterDone: 'custom-super-done',
           }}
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       );
 
-      instance.setProps({
+      wrapper.setProps({
         in: true,
 
-        onEnter(node){
+        onEnter(){
           count++;
-          expect(node.className).toEqual('custom');
+          expect(nodeRef.current.className).toEqual('custom');
         },
 
-        onEntering(node){
+        onEntering(){
           count++;
-          expect(node.className).toEqual('custom custom-super-active');
+          expect(nodeRef.current.className).toEqual('custom custom-super-active');
         },
 
-        onEntered(node){
-          expect(node.className).toEqual('custom-super-done');
+        onEntered(){
+          expect(nodeRef.current.className).toEqual('custom-super-done');
           expect(count).toEqual(2);
           done();
         }
@@ -109,39 +114,43 @@ describe('CSSTransition', () => {
   describe('appearing', () => {
     it('should apply appear classes at each transition state', done => {
       let count = 0;
+      const nodeRef = React.createRef()
       mount(
         <CSSTransition
           timeout={10}
+          nodeRef={nodeRef}
           classNames='appear-test'
           in={true}
           appear={true}
-          onEnter={(node, isAppearing) => {
+          onEnter={(isAppearing) => {
             count++;
             expect(isAppearing).toEqual(true);
-            expect(node.className).toEqual('appear-test-appear');
+            expect(nodeRef.current.className).toEqual('appear-test-appear');
           }}
-          onEntering={(node, isAppearing) => {
+          onEntering={(isAppearing) => {
             count++;
             expect(isAppearing).toEqual(true);
-            expect(node.className).toEqual('appear-test-appear appear-test-appear-active');
+            expect(nodeRef.current.className).toEqual('appear-test-appear appear-test-appear-active');
           }}
 
-          onEntered={(node, isAppearing) => {
+          onEntered={(isAppearing) => {
             expect(isAppearing).toEqual(true);
-            expect(node.className).toEqual('appear-test-appear-done appear-test-enter-done');
+            expect(nodeRef.current.className).toEqual('appear-test-appear-done appear-test-enter-done');
             expect(count).toEqual(2);
             done();
           }}
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       );
     });
 
     it('should lose the "*-appear-done" class after leaving and entering again', (done) => {
+      const nodeRef = React.createRef()
       const wrapper = mount(
         <CSSTransition
           timeout={10}
+          nodeRef={nodeRef}
           classNames="appear-test"
           in={true}
           appear={true}
@@ -149,12 +158,12 @@ describe('CSSTransition', () => {
             wrapper.setProps({
               in: false,
               onEntered: () => {},
-              onExited: (node) => {
-                expect(node.className).toBe('appear-test-exit-done')
+              onExited: () => {
+                expect(nodeRef.current.className).toBe('appear-test-exit-done')
                 wrapper.setProps({
                   in: true,
                   onEntered: () => {
-                    expect(node.className).toBe('appear-test-enter-done')
+                    expect(nodeRef.current.className).toBe('appear-test-enter-done')
                     done()
                   }
                 })
@@ -162,61 +171,65 @@ describe('CSSTransition', () => {
             })
           }}
         >
-          <div />
+          <div ref={nodeRef} />
         </CSSTransition>
       )
     });
 
     it('should not add undefined when appearDone is not defined', done => {
+      const nodeRef = React.createRef()
       mount(
         <CSSTransition
           timeout={10}
+          nodeRef={nodeRef}
           classNames={{ appear: 'appear-test' }}
           in={true}
           appear={true}
-          onEnter={(node, isAppearing) => {
+          onEnter={(isAppearing) => {
             expect(isAppearing).toEqual(true);
-            expect(node.className).toEqual('appear-test');
+            expect(nodeRef.current.className).toEqual('appear-test');
           }}
-          onEntered={(node, isAppearing) => {
+          onEntered={(isAppearing) => {
             expect(isAppearing).toEqual(true);
-            expect(node.className).toEqual('');
+            expect(nodeRef.current.className).toEqual('');
             done();
           }}
         >
-          <div/>
+          <div ref={nodeRef}/>
         </CSSTransition>
       );
     });
 
     it('should not be appearing in normal enter mode', done => {
       let count = 0;
+      const nodeRef = React.createRef()
       mount(
         <CSSTransition
           timeout={10}
+          nodeRef={nodeRef}
           classNames='not-appear-test'
           appear={true}
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       ).setProps({
         in: true,
 
-        onEnter(node, isAppearing){
+        onEnter(isAppearing){
           count++;
           expect(isAppearing).toEqual(false);
-          expect(node.className).toEqual('not-appear-test-enter');
+          expect(nodeRef.current.className).toEqual('not-appear-test-enter');
         },
 
-        onEntering(node, isAppearing){
+        onEntering(isAppearing){
           count++;
           expect(isAppearing).toEqual(false);
-          expect(node.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
+          expect(nodeRef.current.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
         },
 
-        onEntered(node, isAppearing){
+        onEntered(isAppearing){
           expect(isAppearing).toEqual(false);
-          expect(node.className).toEqual('not-appear-test-enter-done');
+          expect(nodeRef.current.className).toEqual('not-appear-test-enter-done');
           expect(count).toEqual(2);
           done();
         }
@@ -224,9 +237,11 @@ describe('CSSTransition', () => {
     });
 
     it('should not enter the transition states when appear=false', () => {
+      const nodeRef = React.createRef()
       mount(
         <CSSTransition
           timeout={10}
+          nodeRef={nodeRef}
           classNames='appear-fail-test'
           in={true}
           appear={false}
@@ -240,7 +255,7 @@ describe('CSSTransition', () => {
             throw Error('Entred called!')
           }}
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       );
     });
@@ -249,16 +264,18 @@ describe('CSSTransition', () => {
   });
 
   describe('exiting', ()=> {
-    let instance;
+    let wrapper, nodeRef;
 
     beforeEach(() => {
-      instance = mount(
+      nodeRef = React.createRef()
+      wrapper = mount(
         <CSSTransition
           in
+          nodeRef={nodeRef}
           timeout={10}
           classNames="test"
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       )
     });
@@ -266,21 +283,21 @@ describe('CSSTransition', () => {
     it('should apply classes at each transition state', done => {
       let count = 0;
 
-      instance.setProps({
+      wrapper.setProps({
         in: false,
 
-        onExit(node){
+        onExit(){
           count++;
-          expect(node.className).toEqual('test-exit');
+          expect(nodeRef.current.className).toEqual('test-exit');
         },
 
-        onExiting(node){
+        onExiting(){
           count++;
-          expect(node.className).toEqual('test-exit test-exit-active');
+          expect(nodeRef.current.className).toEqual('test-exit test-exit-active');
         },
 
-        onExited(node){
-          expect(node.className).toEqual('test-exit-done');
+        onExited(){
+          expect(nodeRef.current.className).toEqual('test-exit-done');
           expect(count).toEqual(2);
           done();
         }
@@ -289,9 +306,11 @@ describe('CSSTransition', () => {
 
     it('should apply custom classNames names', done => {
       let count = 0;
-      instance = mount(
+      const nodeRef = React.createRef()
+      wrapper = mount(
         <CSSTransition
           in
+          nodeRef={nodeRef}
           timeout={10}
           classNames={{
             exit: 'custom',
@@ -299,25 +318,25 @@ describe('CSSTransition', () => {
             exitDone: 'custom-super-done',
           }}
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       );
 
-      instance.setProps({
+      wrapper.setProps({
         in: false,
 
-        onExit(node){
+        onExit() {
           count++;
-          expect(node.className).toEqual('custom');
+          expect(nodeRef.current.className).toEqual('custom');
         },
 
-        onExiting(node){
+        onExiting() {
           count++;
-          expect(node.className).toEqual('custom custom-super-active');
+          expect(nodeRef.current.className).toEqual('custom custom-super-active');
         },
 
-        onExited(node){
-          expect(node.className).toEqual('custom-super-done');
+        onExited() {
+          expect(nodeRef.current.className).toEqual('custom-super-done');
           expect(count).toEqual(2);
           done();
         }
@@ -327,30 +346,32 @@ describe('CSSTransition', () => {
     it('should support empty prefix', done => {
       let count = 0;
 
-      const instance = mount(
+      const nodeRef = React.createRef()
+      const wrapper = mount(
         <CSSTransition
           in
+          nodeRef={nodeRef}
           timeout={10}
         >
-          <div/>
+          <div ref={nodeRef} />
         </CSSTransition>
       )
 
-      instance.setProps({
+      wrapper.setProps({
         in: false,
 
-        onExit(node){
+        onExit() {
           count++;
-          expect(node.className).toEqual('exit');
+          expect(nodeRef.current.className).toEqual('exit');
         },
 
-        onExiting(node){
+        onExiting() {
           count++;
-          expect(node.className).toEqual('exit exit-active');
+          expect(nodeRef.current.className).toEqual('exit exit-active');
         },
 
-        onExited(node){
-          expect(node.className).toEqual('exit-done');
+        onExited() {
+          expect(nodeRef.current.className).toEqual('exit-done');
           expect(count).toEqual(2);
           done();
         }
@@ -359,11 +380,11 @@ describe('CSSTransition', () => {
   });
 
   describe('reentering', () => {
-    it('should remove dynamically applied classes', done => {
+    it('should remove dynamically applied classes', async () => {
       let count = 0;
       class Test extends React.Component {
         render() {
-          const { direction, text, ...props } = this.props;
+          const { direction, text, nodeRef, ...props } = this.props;
 
           return (
             <TransitionGroup
@@ -377,19 +398,25 @@ describe('CSSTransition', () => {
               <CSSTransition
                 key={text}
                 timeout={100}
+                nodeRef={nodeRef}
                 {...props}
               >
-                <span>{text}</span>
+                <span ref={nodeRef}>{text}</span>
               </CSSTransition>
             </TransitionGroup>
           )
         }
       }
 
-      const instance = mount(<Test direction="down" text="foo" />)
+      const nodeRef = {
+        foo: React.createRef(),
+        bar: React.createRef(),
+      }
+
+      const wrapper = mount(<Test direction="down" text="foo" nodeRef={nodeRef.foo} />)
 
       const rerender = getProps => new Promise(resolve =>
-        instance.setProps({
+        wrapper.setProps({
           onEnter: undefined,
           onEntering: undefined,
           onEntered: undefined,
@@ -400,40 +427,39 @@ describe('CSSTransition', () => {
         })
       );
 
-      Promise.resolve().then(() =>
-        rerender(resolve => ({
-          direction: 'up',
-          text: 'bar',
+      await rerender(resolve => ({
+        direction: 'up',
+        text: 'bar',
+        nodeRef: nodeRef.bar,
 
-          onEnter(node) {
-            count++;
-            expect(node.className).toEqual('up-enter');
-          },
-          onEntering(node) {
-            count++;
-            expect(node.className).toEqual('up-enter up-enter-active');
-            resolve()
-          }
-        }))
-      ).then(() => {
-        return rerender(resolve => ({
-          direction: 'down',
-          text: 'foo',
-
-          onEntering(node) {
-            count++;
-            expect(node.className).toEqual('down-enter down-enter-active');
-          },
-          onEntered(node) {
-            count++;
-            expect(node.className).toEqual('down-enter-done');
-            resolve();
-          }
-        }))
-      }).then(() => {
-        expect(count).toEqual(4);
-        done();
-      });
+        onEnter() {
+          count++;
+          expect(nodeRef.bar.current.className).toEqual('up-enter');
+        },
+        onEntering() {
+          count++;
+          expect(nodeRef.bar.current.className).toEqual('up-enter up-enter-active');
+          resolve()
+        }
+      }))
+
+      await rerender(resolve => ({
+        direction: 'down',
+        text: 'foo',
+        nodeRef: nodeRef.foo,
+
+        onEntering() {
+          count++;
+          expect(nodeRef.foo.current.className).toEqual('down-enter down-enter-active');
+        },
+        onEntered() {
+          count++;
+          expect(nodeRef.foo.current.className).toEqual('down-enter-done');
+          resolve();
+        }
+      }))
+
+      expect(count).toEqual(4);
     });
   });
 });
diff --git a/test/CSSTransitionGroup-test.js b/test/CSSTransitionGroup-test.js
index 4d0decbf..2776a8e0 100644
--- a/test/CSSTransitionGroup-test.js
+++ b/test/CSSTransitionGroup-test.js
@@ -12,9 +12,10 @@ describe('CSSTransitionGroup', () => {
   let consoleErrorSpy;
 
   function YoloTransition({ id, ...props }) {
+    const nodeRef = React.useRef()
     return (
-      <CSSTransition classNames="yolo" timeout={0} {...props}>
-        <span id={id} />
+      <CSSTransition nodeRef={nodeRef} classNames="yolo" timeout={0} {...props}>
+        <span ref={nodeRef} id={id} />
       </CSSTransition>
     )
   }
diff --git a/test/SwitchTransition-test.js b/test/SwitchTransition-test.js
index 744e2967..76d2a527 100644
--- a/test/SwitchTransition-test.js
+++ b/test/SwitchTransition-test.js
@@ -10,20 +10,21 @@ describe('SwitchTransition', () => {
   beforeEach(() => {
     log = [];
     let events = {
-      onEnter: (_, m) => log.push(m ? 'appear' : 'enter'),
-      onEntering: (_, m) => log.push(m ? 'appearing' : 'entering'),
-      onEntered: (_, m) => log.push(m ? 'appeared' : 'entered'),
+      onEnter: (m) => log.push(m ? 'appear' : 'enter'),
+      onEntering: (m) => log.push(m ? 'appearing' : 'entering'),
+      onEntered: (m) => log.push(m ? 'appeared' : 'entered'),
       onExit: () => log.push('exit'),
       onExiting: () => log.push('exiting'),
       onExited: () => log.push('exited')
     };
 
+    const nodeRef = React.createRef()
     Parent = function Parent({ on, rendered = true }) {
       return (
         <SwitchTransition>
           {rendered ? (
-            <Transition timeout={0} key={on ? 'first' : 'second'} {...events}>
-              <span />
+            <Transition nodeRef={nodeRef} timeout={0} key={on ? 'first' : 'second'} {...events}>
+              <span ref={nodeRef} />
             </Transition>
           ) : null}
         </SwitchTransition>
@@ -32,10 +33,11 @@ describe('SwitchTransition', () => {
   });
 
   it('should have default status ENTERED', () => {
+    const nodeRef = React.createRef()
     const wrapper = mount(
       <SwitchTransition>
-        <Transition timeout={0} key="first">
-          <span />
+        <Transition nodeRef={nodeRef} timeout={0} key="first">
+          <span ref={nodeRef} />
         </Transition>
       </SwitchTransition>
     );
@@ -44,10 +46,11 @@ describe('SwitchTransition', () => {
   });
 
   it('should have default mode: out-in', () => {
+    const nodeRef = React.createRef()
     const wrapper = mount(
       <SwitchTransition>
-        <Transition timeout={0} key="first">
-          <span />
+        <Transition nodeRef={nodeRef} timeout={0} key="first">
+          <span ref={nodeRef} />
         </Transition>
       </SwitchTransition>
     );
@@ -56,11 +59,12 @@ describe('SwitchTransition', () => {
   });
 
   it('should work without childs', () => {
+    const nodeRef = React.createRef()
     expect(() => {
       mount(
         <SwitchTransition>
-          <Transition timeout={0} key="first">
-            <span />
+          <Transition nodeRef={nodeRef} timeout={0} key="first">
+            <span ref={nodeRef} />
           </Transition>
         </SwitchTransition>
       );
diff --git a/test/Transition-test.js b/test/Transition-test.js
index bc31c926..c3690fa3 100644
--- a/test/Transition-test.js
+++ b/test/Transition-test.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 
 import { mount } from 'enzyme'
 
@@ -25,15 +26,17 @@ expect.extend({
 
 describe('Transition', () => {
   it('should not transition on mount', () => {
+    const nodeRef = React.createRef()
     let wrapper = mount(
       <Transition
         in
+        nodeRef={nodeRef}
         timeout={0}
         onEnter={() => {
           throw new Error('should not Enter')
         }}
       >
-        <div />
+        <div ref={nodeRef} />
       </Transition>
     )
 
@@ -41,21 +44,23 @@ describe('Transition', () => {
   })
 
   it('should transition on mount with `appear`', done => {
+    const nodeRef = React.createRef()
     mount(
       <Transition
         in
+        nodeRef={nodeRef}
         timeout={0}
         onEnter={() => {
           throw Error('Animated!')
         }}
       >
-        <div />
+        <div ref={nodeRef} />
       </Transition>
     )
 
     mount(
-      <Transition in appear timeout={0} onEnter={() => done()}>
-        <div />
+      <Transition nodeRef={nodeRef} in appear timeout={0} onEnter={() => done()}>
+        <div ref={nodeRef} />
       </Transition>
     )
   })
@@ -63,14 +68,16 @@ describe('Transition', () => {
   it('should pass filtered props to children', () => {
     class Child extends React.Component {
       render() {
-        return <div>child</div>
+        return <div ref={this.props.nodeRef}>child</div>
       }
     }
+    const nodeRef = React.createRef()
     const child = mount(
       <Transition
         foo="foo"
         bar="bar"
         in
+        nodeRef={nodeRef}
         mountOnEnter
         unmountOnExit
         appear
@@ -85,59 +92,64 @@ describe('Transition', () => {
         onExiting={() => {}}
         onExited={() => {}}
       >
-        <Child />
+        <Child nodeRef={nodeRef} />
       </Transition>
     ).find(Child)
 
-    expect(child.props()).toEqual({ foo: 'foo', bar: 'bar' })
+    expect(child.props()).toEqual({ foo: 'foo', bar: 'bar', nodeRef })
   })
 
   it('should allow addEndListener instead of timeouts', done => {
-    let listener = jest.fn((node, end) => setTimeout(end, 0))
+    let listener = jest.fn(end => setTimeout(end, 0))
 
-    let inst = mount(
+    const nodeRef = React.createRef()
+    let wrapper = mount(
       <Transition
+        nodeRef={nodeRef}
         addEndListener={listener}
         onEntered={() => {
           expect(listener).toHaveBeenCalledTimes(1)
           done()
         }}
       >
-        <div />
+        <div ref={nodeRef} />
       </Transition>
     )
 
-    inst.setProps({ in: true })
+    wrapper.setProps({ in: true })
   })
 
   it('should fallback to timeouts with addEndListener', done => {
     let calledEnd = false
-    let listener = (node, end) =>
+    let listener = (end) =>
       setTimeout(() => {
         calledEnd = true
         end()
       }, 100)
 
-    let inst = mount(
+    const nodeRef = React.createRef()
+    let wrapper = mount(
       <Transition
         timeout={0}
+        nodeRef={nodeRef}
         addEndListener={listener}
         onEntered={() => {
           expect(calledEnd).toEqual(false)
           done()
         }}
       >
-        <div />
+        <div ref={nodeRef} />
       </Transition>
     )
 
-    inst.setProps({ in: true })
+    wrapper.setProps({ in: true })
   })
 
   it('should mount/unmount immediately if not have enter/exit timeout', (done) => {
+    const nodeRef = React.createRef()
     const wrapper = mount(
-      <Transition in={true} timeout={{}}>
-        <div />
+      <Transition nodeRef={nodeRef} in={true} timeout={{}}>
+        <div ref={nodeRef} />
       </Transition>
     )
 
@@ -158,15 +170,45 @@ describe('Transition', () => {
     })
   })
 
+  it('should use `React.findDOMNode` when `nodeRef` is not provided', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+    const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode')
+
+    mount(
+      <Transition in appear timeout={0}>
+        <div />
+      </Transition>
+    )
+
+    expect(findDOMNodeSpy).toHaveBeenCalled();
+    findDOMNodeSpy.mockRestore()
+    consoleSpy.mockRestore()
+  })
+
+  it('should not use `React.findDOMNode` when `nodeRef` is provided', () => {
+    const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode')
+
+    const nodeRef = React.createRef()
+    mount(
+      <Transition nodeRef={nodeRef} in appear timeout={0}>
+        <div ref={nodeRef} />
+      </Transition>
+    )
+
+    expect(findDOMNodeSpy).not.toHaveBeenCalled();
+    findDOMNodeSpy.mockRestore()
+  })
+
   describe('appearing timeout', () => {
     it('should use enter timeout if appear not set', done => {
       let calledBeforeEntered = false
       setTimeout(() => {
         calledBeforeEntered = true
       }, 10)
+      const nodeRef = React.createRef()
       const wrapper = mount(
-        <Transition in={true} timeout={{ enter: 20, exit: 10 }} appear>
-          <div />
+        <Transition nodeRef={nodeRef} in={true} timeout={{ enter: 20, exit: 10 }} appear>
+          <div ref={nodeRef} />
         </Transition>
       )
 
@@ -182,9 +224,10 @@ describe('Transition', () => {
     })
 
     it('should use appear timeout if appear is set', done => {
+      const nodeRef = React.createRef()
       const wrapper = mount(
-        <Transition in={true} timeout={{ enter: 20, exit: 10, appear: 5 }} appear>
-          <div />
+        <Transition nodeRef={nodeRef} in={true} timeout={{ enter: 20, exit: 10, appear: 5 }} appear>
+          <div ref={nodeRef} />
         </Transition>
       )
 
@@ -206,12 +249,13 @@ describe('Transition', () => {
   })
 
   describe('entering', () => {
-    let wrapper
+    let wrapper, nodeRef;
 
     beforeEach(() => {
+      nodeRef = React.createRef()
       wrapper = mount(
-        <Transition timeout={10}>
-          <div />
+        <Transition nodeRef={nodeRef} timeout={10}>
+          <div ref={nodeRef} />
         </Transition>
       )
     })
@@ -267,12 +311,13 @@ describe('Transition', () => {
   })
 
   describe('exiting', () => {
-    let wrapper
+    let wrapper, nodeRef;
 
     beforeEach(() => {
+      nodeRef = React.createRef()
       wrapper = mount(
-        <Transition in timeout={10}>
-          <div />
+        <Transition nodeRef={nodeRef} in timeout={10}>
+          <div ref={nodeRef} />
         </Transition>
       )
     })
@@ -329,10 +374,8 @@ describe('Transition', () => {
 
   describe('mountOnEnter', () => {
     class MountTransition extends React.Component {
-      constructor(props) {
-        super(props)
-        this.state = { in: props.initialIn }
-      }
+      nodeRef = React.createRef()
+      state = { in: this.props.initialIn }
 
       render() {
         const { ...props } = this.props
@@ -341,12 +384,13 @@ describe('Transition', () => {
         return (
           <Transition
             ref={transition => this.transition = this.transition || transition}
+            nodeRef={this.nodeRef}
             mountOnEnter
             in={this.state.in}
             timeout={10}
             {...props}
           >
-            <div />
+            <div ref={this.nodeRef} />
           </Transition>
         )
       }
@@ -362,7 +406,7 @@ describe('Transition', () => {
           initialIn={false}
           onEnter={() => {
             expect(wrapper.instance().getStatus()).toEqual(EXITED)
-            expect(wrapper.getDOMNode()).toExist()
+            expect(wrapper.instance().nodeRef.current).toExist()
             done()
           }}
         />
@@ -370,7 +414,7 @@ describe('Transition', () => {
 
       expect(wrapper.instance().getStatus()).toEqual(UNMOUNTED)
 
-      expect(wrapper.getDOMNode()).not.toExist()
+      expect(wrapper.instance().nodeRef.current).not.toExist()
 
       wrapper.setProps({ in: true })
     })
@@ -381,27 +425,27 @@ describe('Transition', () => {
           initialIn={false}
           onEntered={() => {
             expect(wrapper.instance().getStatus()).toEqual(ENTERED)
-            expect(wrapper.getDOMNode()).toExist()
+            expect(wrapper.instance().nodeRef.current).toExist()
 
             wrapper.setState({ in: false })
           }}
           onExited={() => {
             expect(wrapper.instance().getStatus()).toEqual(EXITED)
-            expect(wrapper.getDOMNode()).toExist()
+            expect(wrapper.instance().nodeRef.current).toExist()
 
             done()
           }}
         />
       )
 
-      expect(wrapper.getDOMNode()).not.toExist()
+      expect(wrapper.instance().nodeRef.current).not.toExist()
       wrapper.setState({ in: true })
     })
   })
 
   describe('unmountOnExit', () => {
     class UnmountTransition extends React.Component {
-      divRef = React.createRef()
+      nodeRef = React.createRef()
       state = { in: this.props.initialIn }
 
       render() {
@@ -411,12 +455,13 @@ describe('Transition', () => {
         return (
           <Transition
             ref={transition => this.transition = this.transition || transition}
+            nodeRef={this.nodeRef}
             unmountOnExit
             in={this.state.in}
             timeout={10}
             {...props}
           >
-            <div ref={this.divRef} />
+            <div ref={this.nodeRef} />
           </Transition>
         )
       }
@@ -427,42 +472,42 @@ describe('Transition', () => {
     }
 
     it('should mount when entering', done => {
-      const wrapper = mount(
+      const instance = mount(
         <UnmountTransition
           initialIn={false}
           onEnter={() => {
-            expect(wrapper.getStatus()).toEqual(EXITED)
-            expect(wrapper.divRef.current).toExist()
+            expect(instance.getStatus()).toEqual(EXITED)
+            expect(instance.nodeRef.current).toExist()
 
             done()
           }}
         />
       ).instance()
 
-      expect(wrapper.getStatus()).toEqual(UNMOUNTED)
-      expect(wrapper.divRef.current).toBeNull()
+      expect(instance.getStatus()).toEqual(UNMOUNTED)
+      expect(instance.nodeRef.current).toBeNull()
 
-      wrapper.setState({ in: true })
+      instance.setState({ in: true })
     })
 
     it('should unmount after exiting', done => {
-      const wrapper = mount(
+      const instance = mount(
         <UnmountTransition
           initialIn
           onExited={() => {
             setTimeout(() => {
-              expect(wrapper.getStatus()).toEqual(UNMOUNTED)
-              expect(wrapper.divRef.current).not.toExist()
+              expect(instance.getStatus()).toEqual(UNMOUNTED)
+              expect(instance.nodeRef.current).not.toExist()
               done()
             })
           }}
         />
       ).instance()
 
-      expect(wrapper.getStatus()).toEqual(ENTERED)
-      expect(wrapper.divRef.current).toExist()
+      expect(instance.getStatus()).toEqual(ENTERED)
+      expect(instance.nodeRef.current).toExist()
 
-      wrapper.setState({ in: false })
+      instance.setState({ in: false })
     })
   })
 })
diff --git a/test/TransitionGroup-test.js b/test/TransitionGroup-test.js
index 91ed167d..f921ae40 100644
--- a/test/TransitionGroup-test.js
+++ b/test/TransitionGroup-test.js
@@ -20,18 +20,19 @@ describe('TransitionGroup', () => {
 
     log = []
     let events = {
-      onEnter: (_, m) => log.push(m ? 'appear' : 'enter'),
-      onEntering: (_, m) => log.push(m ? 'appearing' : 'entering'),
-      onEntered: (_, m) => log.push(m ? 'appeared' : 'entered'),
+      onEnter: (m) => log.push(m ? 'appear' : 'enter'),
+      onEntering: (m) => log.push(m ? 'appearing' : 'entering'),
+      onEntered: (m) => log.push(m ? 'appeared' : 'entered'),
       onExit: () => log.push('exit'),
       onExiting: () => log.push('exiting'),
       onExited: () => log.push('exited'),
     }
 
+    const nodeRef = React.createRef()
     Child = function Child(props) {
       return (
-        <Transition timeout={0} {...props} {...events}>
-          <span />
+        <Transition nodeRef={nodeRef} timeout={0} {...props} {...events}>
+          <span ref={nodeRef} />
         </Transition>
       )
     }
diff --git a/test/setup.js b/test/setup.js
index 4b7566f9..f053547a 100644
--- a/test/setup.js
+++ b/test/setup.js
@@ -1,3 +1,4 @@
+import React from 'react'
 
 global.requestAnimationFrame = function(callback) {
   setTimeout(callback, 0);
@@ -6,4 +7,7 @@ global.requestAnimationFrame = function(callback) {
 const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 
-Enzyme.configure({ adapter: new Adapter() })
+Enzyme.configure({
+  adapter: new Adapter(),
+  wrappingComponent: props => <React.StrictMode {...props} />
+})