Prepare for upcoming react deprecations introduced in 16.3 #2732

justinobney · 2018-04-22T19:50:08Z

Suggestion: begin migration to new react lifecycles while retaining backwards compatibility via react-lifecycles-compat

Example: https://www.youtube.com/watch?v=G9S1IghlkCI

Steps

Use new lifecycle methods introduced in react 16.3 in a component that renders react-semantic-ui components.

Expected Result

React does not log errors/warning about upcoming deprecations to the console.

Actual Result

React IS logging errors/warning about upcoming deprecations to the console.

Version

0.79.1

Testcase

The text was updated successfully, but these errors were encountered:

welcome · 2018-04-22T19:50:10Z

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

levithomason · 2018-04-24T04:37:18Z

@justinobney this is great, could you start a PR for this?

joshuaobrien · 2018-04-25T06:51:38Z

Is this up for grabs? I'm happy to do it.

justinobney · 2018-04-25T11:29:36Z

@joshuaobrien that would be great. I doubt I could get to it for a few weeks.

joshuaobrien · 2018-04-27T01:32:40Z

I'm on it. Will get started on the weekend :)

msrikanth508 · 2018-04-29T17:54:33Z

I would like to start on this, Couple of life cycle methods are marked as UNSAFE in 16.3 and two new methods getDerivedStateFromProps, getSnapshotBeforeUpdate got introduced. @levithomason what exactly do we need to do?

joshuaobrien · 2018-04-30T00:08:20Z

Hi @msrikanth508, I am working on this at the moment. What we need to do is refactor the components that use the deprecated methods so that they no longer use them. Functionality that was in these deprecated lifecycle methods needs to be moved into other lifecycle methods.

My experiences so far is that these changes are not always clean cut. Also, changes to tests are likely required to accommodate the new methods.

gavinmeier25 · 2018-07-23T14:16:14Z

Is this still needed I would be happy to hop on it this upcoming weekend and take a gander?

layershifter · 2018-07-23T14:17:13Z

Yep, feel free to pickup 👍

tri-hoang · 2018-08-15T04:54:17Z

I would love to work on this if it's still needed?

joshuaobrien · 2018-08-27T13:46:33Z

It's still needed. I haven't got around to it. There is a PR here: #2757

kaiz123 · 2018-10-23T20:01:40Z

Hey is this still open to work on @justinobney @joshuaobrien

- Remove unsafe lifecycles: - `componentWillMount` - `componentWillRecieveProps` - `componentWillUpdate` Relates to Semantic-Org#2732

kohakukun · 2018-10-28T00:27:45Z

In case nobody has addressed this, I created a PR #3244 .

Remove unsafe lifecycles from `AutoControlledComponent` and affected components: - `componentWillMount` - `componentWillRecieveProps` - `componentWillUpdate` Relates to Semantic-Org#2732

layershifter · 2019-04-04T14:48:18Z

to be returned - this uses findDOMNode, which is also a violation of StrictMode.

@danpantry It's unfixable as there are no alternative, so we are not going to fix. Once the feature from reactjs/rfcs#97 will be released, we will update to it.

Executed via `npx react-codemod rename-unsafe-lifecycles --parser babel` Disabled lint issues for updated lines. Closes Semantic-Org#3741 Related to Semantic-Org#2732

* chore(mixed): renamed unsafe lifecycle methods Executed via `npx react-codemod rename-unsafe-lifecycles --parser babel` Disabled lint issues for updated lines. Closes #3741 Related to #2732 * bump react to ensure that CI will pass * disable broken UTs

punmechanic · 2020-02-12T15:28:47Z

@layershifter: Hello, from the future :)

It appears that reactjs/rfcs#97 has been closed and while there are two proposed approaches, it seems unlikely that either will land before Suspense ships.

Celludriel · 2020-04-14T08:46:20Z

What does this mean for now ? I'm a day into development for a small ui application at work now with semantic-ui and I am hitting this deprecation warning. If this won't be fixed I can't put code in production with warnings in the console popping up. Will it get fixed eventually ?

punmechanic · 2020-04-15T12:07:45Z

@Celludriel The deprecation warnings are nothing to worry about unless you intend to upgrade to a version of React which removes the unsupported lifecycle methods. It doesn't appear that React will be removing them for a long time, but you should be aware that certain components that you're using within Semantic, for the time being, will not support concurrent mode and so may have subtle bugs.

If you're not using concurrent mode, it's probably not an issue.

As for whether or not it will get fixed, I imagine it will, but there problems that prevent the fix from happening right now.

Celludriel · 2020-04-16T02:47:54Z

@danpantry

Thanks for the information, I disabled strict mode for now so the warning doesn't pop up since our security department is pretty strict when it comes to warnings in the console. Even if it's non sensical they should worry about it.

I'll await the future if it will get fixed later on. Just glad I don't have to switch ui libraries since this one is working just fine for me now

layershifter · 2020-06-24T07:27:00Z

Addressing .findDOMNode() will be a complicated issue as all components should start to use forwardRef().

I am fixing UNSAFE_ warning under #3919, .findDOMNode() will be a next point.

erasmuswill · 2020-07-04T10:41:05Z

Hi guys. Do you need any help with this?

brianespinosa · 2020-07-04T19:03:23Z

I believe the rest of these deprecated methods are being resolved in #3956, after which I believe this issue can be closed.

raymondshiner · 2020-07-13T15:31:30Z

Any more updates on this? This feature is highly anticipated, semantic ui react in its current version throws so many warnings related to this.

layershifter · 2020-07-13T15:42:07Z

Progress is tracked #3919 and a lot of work was already done:

#3956 is remaining to fix lifecycle warnings completely. It's quite complicated as requires tons of refactoring.

Until this will be funded in any way I can't allocate more time for this.

layershifter · 2020-07-16T16:19:50Z

Short update: #3919 was completed and all changes in master should be shipped soon.
Refs handling is a separate thing and work will be tracked under #3819.

layershifter · 2020-07-21T16:48:08Z

Fixes for lifecycles were released in semantic-ui-react@1.0.0 🎉

triage-new-issues bot added the triage label Apr 22, 2018

levithomason added help wanted good first issue chore and removed triage labels Apr 24, 2018

joshuaobrien mentioned this issue May 2, 2018

WIP: preparation for upcoming React lifecycle deprecations #2757

Closed

layershifter mentioned this issue Jun 5, 2018

Update to React 16 #2747

Closed

5 tasks

layershifter mentioned this issue Jun 27, 2018

Semantic UI React raises warnings in StrictMode #2955

Closed

layershifter mentioned this issue Oct 3, 2018

BREAKING(package): require React 16.3 #3032

Merged

kohakukun added a commit to kohakukun/Semantic-UI-React that referenced this issue Oct 28, 2018

chore: Remove unsafe React lifecycles

96041e8

- Remove unsafe lifecycles: - `componentWillMount` - `componentWillRecieveProps` - `componentWillUpdate` Relates to Semantic-Org#2732

kohakukun mentioned this issue Oct 28, 2018

chore: Remove unsafe React lifecycles #3244

Closed

kohakukun mentioned this issue Oct 28, 2018

chore(AutoControlledComponent): Remove unsafe lifecycles #3245

Closed

layershifter mentioned this issue Nov 25, 2018

chore(MountNode): use componentDidMount() #3300

Merged

layershifter mentioned this issue Dec 4, 2018

chore(Dimmer): use createRef() API and componentDidUpdate() #3320

Merged

Stefie mentioned this issue Feb 21, 2019

Dropdown value vs. highlighted item inconsistency #3088

Closed

This was referenced Apr 4, 2019

docs(ComponentProps): replace deprecated lifecycle methods #3555

Merged

docs(ComponentSidebarSection): replace deprecated lifecycle methods #3559

Merged

charliematters mentioned this issue Aug 14, 2019

Warnings about lifecycle methods #3741

Closed

jmyrland mentioned this issue Aug 15, 2019

chore(mixed): renamed unsafe lifecycle methods #3747

Merged

layershifter mentioned this issue Aug 29, 2019

React 17.0 Deprecation Warning #3765

Closed

layershifter mentioned this issue Sep 9, 2019

chore(lib): add ModernAutoControlledComponent #3776

Merged

layershifter mentioned this issue Oct 17, 2019

Console warnings about renaming of componentWillReceiveProps #3811

Closed

punmechanic mentioned this issue Oct 24, 2019

findDOMNode is deprecated in StrictMode #3810

Closed

tomajwinter mentioned this issue Nov 19, 2019

Update NPMs kyan/kyan-jukebox-js#85

Merged

This was referenced Jul 4, 2020

Integrate react suspense in the UI components plone/volto#1550

Closed

Adjust Volto codebase to pass React strict mode checks plone/volto#1629

Open

layershifter removed good first issue help wanted labels Jul 13, 2020

layershifter changed the title ~~Prepare for upcoming react lifecycle deprecations introduced in 16.3~~ Prepare for upcoming react deprecations introduced in 16.3 Jul 16, 2020

layershifter closed this as completed Jul 16, 2020

PTAHume mentioned this issue Sep 22, 2023

semantic ui react dimmer warning finddomnode is deprecated in strictmode #4438

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prepare for upcoming react deprecations introduced in 16.3 #2732

Prepare for upcoming react deprecations introduced in 16.3 #2732

justinobney commented Apr 22, 2018 •

edited

welcome bot commented Apr 22, 2018

levithomason commented Apr 24, 2018

joshuaobrien commented Apr 25, 2018

justinobney commented Apr 25, 2018

joshuaobrien commented Apr 27, 2018

msrikanth508 commented Apr 29, 2018

joshuaobrien commented Apr 30, 2018

gavinmeier25 commented Jul 23, 2018

layershifter commented Jul 23, 2018

tri-hoang commented Aug 15, 2018

joshuaobrien commented Aug 27, 2018 •

edited

kaiz123 commented Oct 23, 2018

kohakukun commented Oct 28, 2018

layershifter commented Apr 4, 2019

punmechanic commented Feb 12, 2020

Celludriel commented Apr 14, 2020

punmechanic commented Apr 15, 2020

Celludriel commented Apr 16, 2020

layershifter commented Jun 24, 2020

erasmuswill commented Jul 4, 2020

brianespinosa commented Jul 4, 2020

raymondshiner commented Jul 13, 2020

layershifter commented Jul 13, 2020

layershifter commented Jul 16, 2020

layershifter commented Jul 21, 2020

Prepare for upcoming react deprecations introduced in 16.3 #2732

Prepare for upcoming react deprecations introduced in 16.3 #2732

Comments

justinobney commented Apr 22, 2018 • edited

Steps

Expected Result

Actual Result

Version

Testcase

welcome bot commented Apr 22, 2018

levithomason commented Apr 24, 2018

joshuaobrien commented Apr 25, 2018

justinobney commented Apr 25, 2018

joshuaobrien commented Apr 27, 2018

msrikanth508 commented Apr 29, 2018

joshuaobrien commented Apr 30, 2018

gavinmeier25 commented Jul 23, 2018

layershifter commented Jul 23, 2018

tri-hoang commented Aug 15, 2018

joshuaobrien commented Aug 27, 2018 • edited

kaiz123 commented Oct 23, 2018

kohakukun commented Oct 28, 2018

layershifter commented Apr 4, 2019

punmechanic commented Feb 12, 2020

Celludriel commented Apr 14, 2020

punmechanic commented Apr 15, 2020

Celludriel commented Apr 16, 2020

layershifter commented Jun 24, 2020

erasmuswill commented Jul 4, 2020

brianespinosa commented Jul 4, 2020

raymondshiner commented Jul 13, 2020

layershifter commented Jul 13, 2020

layershifter commented Jul 16, 2020

layershifter commented Jul 21, 2020

justinobney commented Apr 22, 2018 •

edited

joshuaobrien commented Aug 27, 2018 •

edited