Fix findDOMNode deprecation warning

This PR fixes React `findDOMNode` deprecation warning.
https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

This makes sure the component is compatible with upcoming concurrent mode.

It's a breaking change and requires a major release because it adds a node to the DOM, we could use `display: contents;` as suggested by React.

Author: sergio-toro

visibility-sensor.js

@@ -76,14 +76,15 @@ export default class VisibilitySensor extends React.Component {
   constructor(props) {
     super(props);
 
+    this.node = React.createRef();
+
     this.state = {
       isVisible: null,
       visibilityRect: {}
     };
   }
 
   componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
     if (this.props.active) {
       this.startWatching();
     }
@@ -94,9 +95,6 @@ export default class VisibilitySensor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // re-register node in componentDidUpdate if children diffs [#103]
-    this.node = ReactDOM.findDOMNode(this);
-
     if (this.props.active && !prevProps.active) {
       this.setState({
         isVisible: null,
@@ -219,7 +217,7 @@ export default class VisibilitySensor extends React.Component {
    * Check if the element is within the visible viewport
    */
   check = () => {
-    const el = this.node;
+    const el = this.node && this.node.current;
     let rect;
     let containmentRect;
 
@@ -324,13 +322,17 @@ export default class VisibilitySensor extends React.Component {
     return state;
   };
 
-  render() {
+  renderChildren = () => {
     if (this.props.children instanceof Function) {
       return this.props.children({
         isVisible: this.state.isVisible,
         visibilityRect: this.state.visibilityRect
       });
     }
-    return React.Children.only(this.props.children);
+    return React.Children.only(this.props.children)
+  }
+
+  render() {
+    return <div ref={this.node}>{this.renderChildren()}</div>;
   }
 }