Remove unsafe react lifecycle hooks (Fixes #492)

examples/helpers/ExampleImage.js

@@ -19,15 +19,15 @@ class ExampleImage extends React.Component {
     ready: false,
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.componentId = imageIdCounter++;
     this._load(this.props.src);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.src !== this.props.src) {
-      this.setState({src: null});
-      this._load(nextProps.src);
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.setState({ src: null });
+      this._load(this.props.src);
     }
   }
 

examples/helpers/HOC.js

@@ -27,10 +27,10 @@ function DataCtxt(Wrapped) {
       };
     }
 
-    componentWillReceiveProps(nextProps) {
-      if (JSON.stringify(nextProps.data) !== JSON.stringify(this.state.data)) {
+    componentDidUpdate() {
+      if (JSON.stringify(this.props.data) !== JSON.stringify(this.state.data)) {
         this.setState({
-          data: nextProps.data,
+          data: this.props.data,
         });
       }
     }

package.json

@@ -4,8 +4,8 @@
   "description": "A React table component designed to allow presenting thousands of rows of data.",
   "main": "main.js",
   "peerDependencies": {
-    "react": ">=0.13.0 || ^0.14.0-beta3",
-    "react-dom": ">=0.14.0 || ^0.14.0-beta3"
+    "react": ">=15.3.0",
+    "react-dom": ">=15.3.0"
   },
   "dependencies": {
     "lodash": "^4.17.4",
@@ -94,4 +94,4 @@
     "data-table",
     "fixed-table"
   ]
-}
+}

src/ColumnResizerLine.js

@@ -93,12 +93,12 @@ class ColumnResizerLine extends React.PureComponent {
     cursorDelta: 0,
   }
 
-  componentWillReceiveProps(/*object*/ newProps) {
-    if (newProps.initialEvent && !this._mouseMoveTracker.isDragging()) {
-      this._mouseMoveTracker.captureMouseMoves(newProps.initialEvent);
+  componentDidUpdate() {
+    if (this.props.initialEvent && !this._mouseMoveTracker.isDragging()) {
+      this._mouseMoveTracker.captureMouseMoves(this.props.initialEvent);
       this.setState({
-        width: newProps.initialWidth,
-        cursorDelta: newProps.initialWidth
+        width: this.props.initialWidth,
+        cursorDelta: this.props.initialWidth,
       });
     }
   }

src/FixedDataTable.js

@@ -469,7 +469,9 @@ class FixedDataTable extends React.Component {
     stopScrollPropagation: false,
   }
 
-  componentWillMount() {
+  constructor(props) {
+    super(props);
+
     this._didScrollStop = debounceCore(this._didScrollStopSync, 200, this);
     this._onKeyDown = this._onKeyDown.bind(this);
 
@@ -629,11 +631,10 @@ class FixedDataTable extends React.Component {
     this._reportContentHeight();
   }
 
-  componentWillReceiveProps(/*object*/ nextProps) {
-    this._didScroll(nextProps);
-  }
-
-  componentDidUpdate() {
+  componentDidUpdate(/*object*/ prevProps) {
+    if (prevProps !== this.props) {
+      this._didScroll(prevProps);
+    }
     this._reportContentHeight();
   }
 
@@ -836,7 +837,7 @@ class FixedDataTable extends React.Component {
             cx('fixedDataTableLayout/topShadow'),
             cx('public/fixedDataTable/topShadow'),
           )}
-          style={{top: bodyOffsetTop}}
+          style={{ top: bodyOffsetTop }}
         />;
     }
 
@@ -852,7 +853,7 @@ class FixedDataTable extends React.Component {
             cx('fixedDataTableLayout/bottomShadow'),
             cx('public/fixedDataTable/bottomShadow'),
           )}
-          style={{top: footOffsetTop}}
+          style={{ top: footOffsetTop }}
         />;
     }
     var tabIndex = null;
@@ -1112,23 +1113,23 @@ class FixedDataTable extends React.Component {
   /**
    * Calls the user specified scroll callbacks -- onScrollStart, onScrollEnd, onHorizontalScroll, and onVerticalScroll.
    */
-  _didScroll = (/* !object */ nextProps) => {
+  _didScroll = (/* !object */ prevProps) => {
     const {
       onScrollStart,
       scrollX,
       scrollY,
       onHorizontalScroll,
       onVerticalScroll,
       tableSize: { ownerHeight },
-    } = nextProps;
+    } = this.props;
 
     const {
       endRowIndex: oldEndRowIndex,
       firstRowIndex: oldFirstRowIndex,
       scrollX: oldScrollX,
       scrollY: oldScrollY,
       tableSize: { ownerHeight: oldOwnerHeight },
-    } = this.props;
+    } = prevProps;
 
     // check if scroll values have changed - we have an extra check on NaN because (NaN !== NaN)
     const ownerHeightChanged = ownerHeight !== oldOwnerHeight && !(isNaN(ownerHeight) && isNaN(oldOwnerHeight));
@@ -1193,14 +1194,6 @@ class HorizontalScrollbar extends React.PureComponent {
     isRTL: PropTypes.bool,
   }
 
-  componentWillMount() {
-    this._initialRender = true;
-  }
-
-  componentDidMount() {
-    this._initialRender = false;
-  }
-
   render() /*object*/ {
     const {
       offset,

src/FixedDataTableBufferedRows.js

@@ -61,7 +61,8 @@ class FixedDataTableBufferedRows extends React.Component {
     isRTL: PropTypes.bool,
   }
 
-  componentWillMount() {
+  constructor(props) {
+    super(props);
     this._staticRowArray = [];
     this._initialRender = true;
   }

src/FixedDataTableCell.js

@@ -125,7 +125,12 @@ class FixedDataTableCell extends React.Component {
     return false;
   }
 
-  componentWillReceiveProps(props) {
+  componentDidUpdate(prevProps) {
+    if (prevProps === this.props) {
+      return;
+    }
+
+    const props = this.props;
     var left = props.left + this.state.displacement;
 
     var newState = {
@@ -203,18 +208,18 @@ class FixedDataTableCell extends React.Component {
   render() /*object*/ {
 
     var { height, width, columnKey, isHeaderOrFooter, ...props } = this.props;
-    
+
     var style = {
       height,
       width,
     };
-    
+
     if (this.props.isRTL) {
       style.right = props.left;
     } else {
       style.left = props.left;
     }
-    
+
     if (this.state.isReorderingThisColumn) {
       const DIR_SIGN = this.props.isRTL ? -1 : 1;
       style.transform = `translateX(${this.state.displacement * DIR_SIGN}px) translateZ(0)`;

src/FixedDataTableCellGroup.js

@@ -64,7 +64,8 @@ class FixedDataTableCellGroupImpl extends React.Component {
     isRTL: PropTypes.bool,
   }
 
-  componentWillMount() {
+  constructor(props) {
+    super(props);
     this._initialRender = true;
   }
 
@@ -209,7 +210,7 @@ class FixedDataTableCellGroup extends React.Component {
   }
 
   render() /*object*/ {
-    var {offsetLeft, ...props} = this.props;
+    var { offsetLeft, ...props } = this.props;
 
     var style = {
       height: props.cellGroupWrapperHeight || props.height,

src/FixedDataTableColumnReorderHandle.js

@@ -50,9 +50,6 @@ class FixedDataTableColumnReorderHandle extends React.PureComponent {
     dragDistance: 0
   }
 
-  componentWillReceiveProps(/*object*/ newProps) {
-  }
-
   componentWillUnmount() {
     if (this._mouseMoveTracker) {
       cancelAnimationFrame(this.frameId);

src/FixedDataTableContainer.js

@@ -28,33 +28,34 @@ class FixedDataTableContainer extends React.Component {
     this.update = this.update.bind(this);
 
     this.reduxStore = FixedDataTableStore.get();
-    this.unsubscribe = this.reduxStore.subscribe(this.update);
 
     this.scrollActions = bindActionCreators(scrollActions, this.reduxStore.dispatch);
     this.columnActions = bindActionCreators(columnActions, this.reduxStore.dispatch);
-  }
-
-  componentWillMount() {
-    const props = this.props;
 
     this.reduxStore.dispatch({
       type: ActionTypes.INITIALIZE,
-      props: props
+      props,
     });
 
-    this.update();
+    this.unsubscribe = this.reduxStore.subscribe(this.update);
+    this.state = this.getBoundState();
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
+    // Only react to prop changes - ignore updates due to internal state
+    if (this.props === prevProps) {
+      return;
+    }
+
     invariant(
-      nextProps.height !== undefined || nextProps.maxHeight !== undefined,
+      this.props.height !== undefined || this.props.maxHeight !== undefined,
       'You must set either a height or a maxHeight'
     );
 
     this.reduxStore.dispatch({
       type: ActionTypes.PROP_CHANGE,
-      newProps: nextProps,
-      oldProps: this.props,
+      newProps: this.props,
+      oldProps: prevProps,
     });
   }
 
@@ -69,15 +70,15 @@ class FixedDataTableContainer extends React.Component {
   render() {
     return (
       <FixedDataTable
-        {...this.props}
         {...this.state}
+        {...this.props}
         scrollActions={this.scrollActions}
         columnActions={this.columnActions}
       />
     );
   }
 
-  update() {
+  getBoundState() {
     const state = this.reduxStore.getState();
     const boundState = pick(state, [
       'columnGroupProps',
@@ -104,8 +105,11 @@ class FixedDataTableContainer extends React.Component {
       'scrollJumpedY',
       'tableSize',
     ]);
+    return boundState;
+  }
 
-    this.setState(boundState);
+  update() {
+    this.setState(this.getBoundState());
   }
 }
 

src/FixedDataTableRow.js

@@ -483,7 +483,8 @@ class FixedDataTableRow extends React.Component {
     width: PropTypes.number.isRequired,
   };
 
-  componentWillMount() {
+  constructor(props) {
+    super(props);
     this._initialRender = true;
   }
 

src/FixedDataTableStore.js

@@ -15,7 +15,5 @@ import reducers from 'reducers'
 import { createStore } from 'redux'
 
 export default {
-  get: () => {
-    return createStore(reducers)
-  },
+  get: () => createStore(reducers)
 };

src/Scrollbar.js

@@ -58,28 +58,29 @@ class Scrollbar extends React.PureComponent {
       props.contentSize,
       props.orientation
     );
+    this._initialRender = true;
   }
 
-  componentWillReceiveProps(/*object*/ nextProps) {
-    var controlledPosition = nextProps.position;
+  componentDidUpdate() {
+    var controlledPosition = this.props.position;
     if (controlledPosition === undefined) {
       this._setNextState(
         this._calculateState(
           this.state.position,
-          nextProps.size,
-          nextProps.contentSize,
-          nextProps.orientation
+          this.props.size,
+          this.props.contentSize,
+          this.props.orientation
         )
       );
     } else {
       this._setNextState(
         this._calculateState(
           controlledPosition,
-          nextProps.size,
-          nextProps.contentSize,
-          nextProps.orientation
+          this.props.size,
+          this.props.contentSize,
+          this.props.orientation
         ),
-        nextProps
+        this.props
       );
     }
   }
@@ -186,7 +187,7 @@ class Scrollbar extends React.PureComponent {
     );
   }
 
-  componentWillMount() {
+  componentDidMount() {
     var isHorizontal = this.props.orientation === 'horizontal';
     var onWheel = isHorizontal ? this._onWheelX : this._onWheelY;
 
@@ -196,10 +197,7 @@ class Scrollbar extends React.PureComponent {
       this._shouldHandleY, // Should handle vertical scroll
       this.props.isRTL
     );
-    this._initialRender = true;
-  }
 
-  componentDidMount() {
     this._rootRef && this._rootRef.addEventListener(
         'wheel',
         this._wheelHandler.onWheel,