componentWillReceiveProps has been renamed

Question

I'm using Material ui SwipeableViews That use ReactSwipableView package, I'm getting this error on the console

react-dom.development.js:12466 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at:
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: ReactSwipableView

is there any way to get rid of this error i did try UNSAFE_componentWillReceiveProps but nothing change

Answer 1

It seems this has been reported to the maintainers already.

Now, as a consumer of an open source software, you may:

• wait for them to fix (or not fix) the problem
• be cool and submit a PR to fix it for them :) Here are all the references to componentWillReceiveProps in the repo
• find a new package to use

Ultimately, this isn't an error related to your software, but the dependencies it relies on. It isn't really your responsibility to fix those. If your app runs, it'll be fine. Warnings from react-dom.development.js won't appear in production.

Answer 2

Use getDerivedStateFromProps instead of componentWillReceiveProps

For example:

Before:

// Before
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}

After:

// After
class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Answer 3

I had issues finding where in my code componentWillReceiveProps was being called. I did notice in the warning it mentioned a particular component, "Drawer" which was part of the ant-d lib we are using. After upgrading ant-d to the latest version, the warning went away.