Merge pull request #224 from Newbie012/fix-UNSAFE_componentWillReceiveProps

Replace UNSAFE_componentWillReceiveProps with getDerivedStateFromProps

Author: ankeetmaini

src/index.tsx

@@ -29,6 +29,7 @@ export interface Props {
 interface State {
   showLoader: boolean;
   pullToRefreshThresholdBreached: boolean;
+  prevDataLength: number | undefined;
 }
 
 export default class InfiniteScroll extends Component<Props, State> {
@@ -38,6 +39,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     this.state = {
       showLoader: false,
       pullToRefreshThresholdBreached: false,
+      prevDataLength: props.dataLength,
     };
 
     this.throttledOnScrollListener = throttle(150, this.onScrollListener).bind(
@@ -137,17 +139,31 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(props: Props) {
+  componentDidUpdate(prevProps: Props) {
     // do nothing when dataLength is unchanged
-    if (this.props.dataLength === props.dataLength) return;
+    if (this.props.dataLength === prevProps.dataLength) return;
 
     this.actionTriggered = false;
+
     // update state when new data was sent in
     this.setState({
       showLoader: false,
     });
   }
 
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    const dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
+
+    // reset when data changes
+    if (dataLengthChanged) {
+      return {
+        ...prevState,
+        prevDataLength: nextProps.dataLength,
+      };
+    }
+    return null;
+  }
+
   getScrollableTarget = () => {
     if (this.props.scrollableTarget instanceof HTMLElement)
       return this.props.scrollableTarget;