Merge pull request #1840 from akiran/deprecation-warnings

remove findDOMNode usage

Author: akiran

docs/index.js

@@ -5,4 +5,9 @@ import ReactDOM from "react-dom";
 import Docs from "./docs";
 
 React.initializeTouchEvents && React.initializeTouchEvents(true);
-ReactDOM.render(<Docs />, document.getElementById("rapp"));
+ReactDOM.render(
+  <React.StrictMode>
+    <Docs />
+  </React.StrictMode>,
+  document.getElementById("rapp")
+);

docs/single-demo.js

@@ -48,4 +48,9 @@ function App() {
 }
 
 React.initializeTouchEvents && React.initializeTouchEvents(true);
-ReactDOM.render(<App />, document.getElementById("rapp"));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("rapp")
+);

src/inner-slider.js

@@ -1,7 +1,6 @@
 "use strict";
 
 import React from "react";
-import ReactDOM from "react-dom";
 import initialState from "./initial-state";
 import debounce from "lodash.debounce";
 import classnames from "classnames";
@@ -192,7 +191,9 @@ export class InnerSlider extends React.Component {
     this.debouncedResize();
   };
   resizeWindow = (setTrackStyle = true) => {
-    if (!ReactDOM.findDOMNode(this.track)) return;
+    const isTrackMounted = Boolean(this.track && this.track.node);
+    // prevent warning: setting state on unmounted component (server side rendering)
+    if (!isTrackMounted) return;
     let spec = {
       listRef: this.list,
       trackRef: this.track,

src/track.js

@@ -187,12 +187,17 @@ const renderSlides = spec => {
 };
 
 export class Track extends React.PureComponent {
+  node = null;
+
+  handleRef = ref => { this.node = ref };
+
   render() {
     const slides = renderSlides(this.props);
     const { onMouseEnter, onMouseOver, onMouseLeave } = this.props;
     const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };
     return (
       <div
+        ref={this.handleRef}
         className="slick-track"
         style={this.props.trackStyle}
         {...mouseEvents}

src/utils/innerSliderUtils.js

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 
 export const getOnDemandLazySlides = spec => {
   let onDemandSlides = [];
@@ -99,8 +98,10 @@ export const extractObject = (spec, keys) => {
 export const initializedState = spec => {
   // spec also contains listRef, trackRef
   let slideCount = React.Children.count(spec.children);
-  let listWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(spec.listRef)));
-  let trackWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(spec.trackRef)));
+  const listNode = spec.listRef;
+  let listWidth = Math.ceil(getWidth(listNode));
+  const trackNode = spec.trackRef && spec.trackRef.node;
+  let trackWidth = Math.ceil(getWidth(trackNode));
   let slideWidth;
   if (!spec.vertical) {
     let centerPaddingAdj = spec.centerMode && parseInt(spec.centerPadding) * 2;
@@ -115,9 +116,9 @@ export const initializedState = spec => {
     slideWidth = listWidth;
   }
   let slideHeight =
-    ReactDOM.findDOMNode(spec.listRef) &&
+    listNode &&
     getHeight(
-      ReactDOM.findDOMNode(spec.listRef).querySelector('[data-index="0"]')
+      listNode.querySelector('[data-index="0"]')
     );
   let listHeight = slideHeight * spec.slidesToShow;
   let currentSlide =
@@ -513,7 +514,7 @@ export const getSlideCount = spec => {
     : 0;
   if (spec.swipeToSlide) {
     let swipedSlide;
-    const slickList = ReactDOM.findDOMNode(spec.listRef);
+    const slickList = spec.listRef;
     const slides = slickList.querySelectorAll(".slick-slide");
     Array.from(slides).every(slide => {
       if (!spec.vertical) {
@@ -719,7 +720,7 @@ export const getTrackLeft = spec => {
 
   if (variableWidth === true) {
     var targetSlideIndex;
-    let trackElem = ReactDOM.findDOMNode(trackRef);
+    const trackElem = trackRef && trackRef.node;
     targetSlideIndex = slideIndex + getPreClones(spec);
     targetSlide = trackElem && trackElem.childNodes[targetSlideIndex];
     targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;