Warning Unsafe legacy lifecycles will not be called for components ... keeps appearing

[eldenpark]

Do you want to request a feature or report a bug?
Might be a bug?

What is the current behavior?
Replaced componentWillReceiveProps() with a newly added getDerivedStateFromProps() but the warning keeps appearing in the console.

I doubted the higher order component at first sight, so removed all the coupling with this component's higher order wrapper. I also removed children in render() in an effort to remove all the side effects.

Apparently there's no componentWillReceiveProps() in this component but I cannot get rid of this warning. The only thing I could do was to explicitly assign null to this.componentWillReceiveProps, then the warning was gone.

Am I missing something or is it a bug? I also wish this warning could be optionally turned off in development environment. (Considering the legacy React libraries still use them and can be injected by e.g. HOC)

class RootContainer extends React.Component {
  constructor() {
    super();
    this.state = {
    };
    this.componentWillReceiveProps = null; // Only way I can turn that warning off
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // ...
    return prevState;
  }

  render() {
    return (
      <div>1</div>
      // <Root>
      //   {this.props.history 
      //     ? this.props.children 
      //     : null}
      // </Root>
    );
  }
}

// ...

export default RootContainer;
// export default withRouter(connect(makeMapStateToProps)(RootContainer));

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?
No warning (or at least to turn that off by option even in development environment)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• React 16.3.0
• React-DOM 16.3.0
• React-Redux 5.0.7
• React-Router-DOM 4.2.2

UPDATE Apr 4

• React-hot-loader 4.0.0 (CAUSE OF WARNING)

[aweary]

@eldeni can you please share an example reproducing your issue? I'm not able to reproduce the problem with your example. I suspect there's another HOC/component in your app that's causing the problem.

[gaearon]

Do you use some library that monkeypatches React.Component.prototype? Maybe for logging or something. What do you see when you console.log(this.componentWillReceiveProps)?

We’d need to see a reproducing example. We can’t turn off the warning: it’s intentionally there to tell you something is wrong. You need to figure out what is wrong because otherwise the code will behave in a weird way.

[tyscorp]

@eldeni are you using react-hot-loader? gaearon/react-hot-loader#918

[eldenpark]

@gaearon I did use react-hot-loader 4.0.0, and never realized it manipulates lifecycle methods in runtime. As a matter of fact, it is. It's the react-hot-loader that internally wraps the lifecycle method componentWillReceiveProps, and is a cause of warning.

Removing react-hot-loader just for an experiment, I could get rid of the warning. It may be a problem on the react-hot-loader side. I would self-close this issue in a few days if nobody does.

Thanks @tyscorp and also @aweary

console.log(this.componentWillReceiveProps) prints out

ƒ wrappedMethod() {
      proxiedUpdate.call(this);
      sideEffect(this);

      for (var _len = arguments.length, rest = Array(_len), _key = 0; _key < _len; _key++) {
        rest[_key] = arguments[…

[OleksandrBudik]

I have the same problem.

I have disabled react-hot-loader but it didn't help. Our project uses Redux-Saga

@connect(({ s }) => ({ s }), linkActions(SAction))
export default class S extends Component {
  static propTypes = {
    data: PropTypes.array,
  }

  static defaultProps = {
    data: null,
  }

  state = {    
    data: this.props.data,    
  } 

  static getDerivedStateFromProps(nextProps, prevState) {       
    if (prevState.data === nextProps.data) return null;
    
    return { id: '',  event: '', data: nextProps.data };
  }

[gaearon]

@OleksandrBudik Make sure you use the latest react-redux (there are updates available both for 4.x and 5.c branches). Most likely you’re using an older version that copies all static methods (including the new lifecycle) to the wrapping component, causing this warning. The newer version skips this lifecycle.

[aweary]

Since this doesn't appear to be an issue with React, I'll go ahead and close this out 🙂 If someone can provide an example reproducing the issue without any third-party libraries monkey-patching lifecycle methods, I'm happy to re-open.

[OleksandrBudik]

@gaearon I've upgraded to react-redux 5.0.7, but it didn't help too. It's obvious there is some 3rd party lib causing the issue, now need to check them all

[allexysleeps]

I have the same issue. It also causes serious bug alongside with warning.
It fires getDerivedState... every time component updates.

It seems to be a react-redux issue. I've updated to the 5.1.0 Didn't help.