Semantic-ui-react: Warnings about lifecycle methods

[TdyP]

Bug Report

Steps

Use Dropdown with [email protected] and [email protected]
Open your console to see the warnings

Expected Result

No warnings should appear

Actual Result

      Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

      * Move code with side effects to componentDidMount, and set initial state in the constructor.
      * Rename componentWillMount to UNSAFE_componentWillMount 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: Dropdown

Version

0.87.3

Testcase

https://codesandbox.io/s/semantic-ui-react-y6s9z?fontsize=14

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[evanstern]

I can confirm this as well. I see it for more than just Dropdown. It should be seen for any component that uses the newly deprecated lifecycle methods.

I'm sure most of us have seen it but here are the release notes from React that outline the change that causes this issue:

https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#renaming-unsafe-lifecycle-methods

[mcrawshaw]

Suggest running the codemod to rename the lifecycle hooks.
npx react-codemod rename-unsafe-lifecycles

This will stop the warning messages.

[layershifter]

Folks, thank you for mentioning the issue :+1:
We will include these changes to upcoming release during next week, feel free to open PR :rocket:

[mayhs007]

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: https://fb.me/react-derived-state
• 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: Dropdown, Menu

---

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount 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: Dropdown

[charliematters]

Is this different to #2732?

[layershifter]

@charliematters yep, in this issue we should fix warnings related to these methods via UNSAFE_ prefixing. While in #2732 we should completely remove all UNSAFE_ things.

[layershifter]

PR with fixes was merged, the release with these changes will be shipped during next week 🚀

[rinkisingh8181]

Hey @layershifter
Is there any updates on this?

[layershifter]

It was released in 0.88.0 few hours ago.

[buithithuyquynh1993]

Hey @layershifter
I just use react-codemod rename-unsafe-lifecycles to rename the lifecycle hooks. But I am still receive a warning message:
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
When I use: control + F with key: componentWillReceiveProps, I don't find any code have the hook.
Please help me

[layershifter]

Have you upgraded to the latest? And why are you thinking that it's related to SUIR?

[buithithuyquynh1993]

Have you upgraded to the latest? And why are you thinking that it's related to SUIR?

I installed "react-codemod": "^5.0.5". I don't know why application receive the warning: "componentWillReceiveProps has been renamed, and is not recommended for use" when I don't use the hook in source code
This is my warning:

This is my source file:

import * as React from "react";
import Router from "next/router";
import { ModalConfig, connectModal, InjectedProps, hide } from "redux-modal";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { ButtonGradient } from "@src/components/BaseButton";

interface ModalAggregateSuccessCardProps extends InjectedProps {
  gobackLink?: string;
  closeModal(): void;
}

class ModalAggregateSuccessCard extends React.Component<ModalAggregateSuccessCardProps> {
  constructor(props: ModalAggregateSuccessCardProps) {
    super(props);

    this.handleOnclick = this.handleOnclick.bind(this);
  }

  handleOnclick() {
    const { gobackLink = '' } = this.props;
    this.props.closeModal();
    Router.push(gobackLink);
  }

  render() {

    return (
      <div className={`modal kpfm-modal modal-household-term modal-advice modal-success 
         abc
      </div>
    );
  }
}

const modalConfig: ModalConfig = {
  name: 'AGGREGATE_SUCCESS_CARD_MODAL'
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  closeModal: () => dispatch(hide('AGGREGATE_SUCCESS_CARD_MODAL')),
})

export default connectModal(
  modalConfig
)(connect(
  null, 
  mapDispatchToProps
)(ModalAggregateSuccessCard))

[mcrawshaw]

The ConnectModal is the component that hasn't upgraded. https://github.com/yesmeck/redux-modal/issues/95

[buithithuyquynh1993]

The ConnectModal is the component that hasn't upgraded. yesmeck/redux-modal#95

Yes, I see. I just check latest version of redux-modal ^3.0.2: https://github.com/yesmeck/redux-modal/commits/master. They haven't updated "componentWillReceiveProps" hook yet. Hope we will have the version update the warning soon.

[kapil-soni-nwea]

Hi Guys,
I removed all the deprecated lifecycle from my code even though I am getting these warnings.

Can someone help me that how would I suppress these warnings?
Below is the screenshot of the warnings-

Thanks in advance :)

[fracmak]

Each of the warnings lists out the components that are in violation, immediately jumping out at me are react-router, and react-redux. Some are harder to recognize but I'd focus on those two first

[paulologeh]

import { Header, Divider, Select } from 'semantic-ui-react';

These warnings still appear for me.