UNSAFE_componentWillReceiveProps lifecycle method now throws a warning in newer versions of React

[lkj19zpdiDDe]

The visibility component is using UNSAFE_componentWillReceiveProps . This now gives a warning.

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/behaviors/Visibility/Visibility.js#L191

[welcome]

👋 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.

[Talkwondo]

this is a bug

[keponk]

Similar issue using a Tab component. In a clean environment with an empty (or not) <Tab /> we get:

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles 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

Please update the following components: Menu, Tab

[brianespinosa]

@levithomason @layershifter now that React has changed these UNSAFE_* lifecycle methods to show as warnings in newer versions of React, I think it would probably be good for us to go in and update these. componentDidUpdate or possibly getDerivedStateFromProps I believe are the recommended method to reach for in these scenarios. I did not see anything in progress or noted stating that we want to work on this... but I may have missed it. Thoughts?

[brianespinosa]

Other areas we are using this lifecycle method:

• TransitionablePortal (chore(TransitionablePortal): remove usage of UNSAFE_* methods #3966)
• TransitionGroup (chore(TransitionGroup): remove deprecated lifecycle methods #3970)
• Transition (chore(Transition): remove deprecated lifecycle methods #3982)
• Search (chore(Search): replace deprecated lifecycle methods #3968)
• Sticky (chore(Sticky): remove usage of deprecated lifecycle methods #3974)
• AutoControlledComponent 😳 (chore(Dropdown): remove deprecated lifecycle methods #3986)
• Visibility (chore(Visibility): remove usage of deprecated lifecycle methods #3973)
• Dropdown (chore(Dropdown): remove deprecated lifecycle methods #3986)

[brianespinosa]

For anyone else landing here... this is a dev mode only warning and lifecycle methods will continue to function in React 17+ with the UNSAFE_ prefix.

[brianespinosa]

FYI: #3956

[layershifter]

Was fixed in semantic-ui-react@1.0.0 🎉