Semantic-ui-react: 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[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.

[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:

• [x] [TransitionablePortal](https://github.com/Semantic-Org/Semantic-UI-React/blob/dd66e920a845c199ad2cc05ddec38293a235ec20/src/addons/TransitionablePortal/TransitionablePortal.js) (#3966)
• [x] [TransitionGroup](https://github.com/Semantic-Org/Semantic-UI-React/blob/128e95d3241eb024d4409e7d64d15ea254cf3ed6/src/modules/Transition/TransitionGroup.js) (#3970)
• [x] [Transition](https://github.com/Semantic-Org/Semantic-UI-React/blob/dd66e920a845c199ad2cc05ddec38293a235ec20/src/modules/Transition/Transition.js) (#3982)
• [x] [Search](https://github.com/Semantic-Org/Semantic-UI-React/blob/071f918f73e3c23dd051dbb8f0f90a1e03bed51f/src/modules/Search/Search.js) (#3968)
• [x] [Sticky](https://github.com/Semantic-Org/Semantic-UI-React/blob/62d2feda4c89bb604ab39e3ae5d44f4b78769e7b/src/modules/Sticky/Sticky.js) (#3974)
• [x] [AutoControlledComponent](https://github.com/Semantic-Org/Semantic-UI-React/blob/72c45080e4f20b531fda2e3e430e384083d6766b/src/lib/AutoControlledComponent.js) 😳 (#3986)
• [x] [Visibility](https://github.com/Semantic-Org/Semantic-UI-React/blob/62d2feda4c89bb604ab39e3ae5d44f4b78769e7b/src/behaviors/Visibility/Visibility.js) (#3973)
• [x] [Dropdown](https://github.com/Semantic-Org/Semantic-UI-React/blob/62d2feda4c89bb604ab39e3ae5d44f4b78769e7b/src/modules/Dropdown/Dropdown.js) (#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: https://github.com/Semantic-Org/Semantic-UI-React/pull/3956

[layershifter]

Was fixed in [email protected] 🎉