Gutenberg: Upgrade to React 16.6 stable APIs

[youknowriad]

Ideally, before upgrading, we can get rid of all deprecated APIs surfaced by StrictMode of React 16.6.

• findDOMNode
• The old contextAPI
• componentWillReceiveProps and other lifecycle hooks.

Remaining instances (feel free to add items to the list when you notice used deprecated APIs)

• [x] Remove findDOMNode from Tooltip #11169
• [x] Remove findDOMNode from DropZone Provider #11168
• [x] Remove findDOMNode from Block #11170
• [x] Remove findDOMNode from the inserter #11363
• [x] Remove findDOMNode from NavigableToolbar #11401
• [x] Remove findDOMNode from withHoverAreas #11407
• [x] Remove old context API from Slot/Fill #11123
• [x] Remove componentWillMount from LatestPostsEdit https://github.com/WordPress/gutenberg/pull/14637
• [x] Remove componentWillUpdate from the Fill component #15541
• [x] Remove componentWillReceiveProps from TinyMCE #8148 #11368
• [ ] Investigate and Remove componentWillReceiveProps from Resizable (it's React Native code)
• [x] Remove componentWillReceiveProps from Input at ColorPicker component #11772 @nosolosw

[ellatrix]

There's a PR for the TinyMCE one: #8148.

[ellatrix]

I also see one for Resizable:

react-dom.24169eaf.js:526 Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in Editor (created by ComponentWithSelect)
    in ComponentWithSelect
    in WithSelect(Editor)

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Resizable

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

[youknowriad]

@iseulde I saw it too, not sure where it come from yet but adding an item to the list above.

[nosolosw]

Riad, https://github.com/WordPress/gutenberg/pull/11123 has been merged. Checked the task off from the list.

[youknowriad]

Remove componentWillUpdate from the Fill component

@aduth when you have some time, I'd appreciate some help on this particular point

[nosolosw]

Did not find anything related to the Resizable component, but searching for componentWillReceiveProps did yield one result: the Input leaf component of ColorPicker. I can look into that.

[aduth]

Given the title of the issue, can this be assumed to be closed by #11840?

Or should we update the title if there are remaining tasks?

[nosolosw]

I'd rename it to something along the lines of "Upgrade to React 16.6 stable APIs".

[youknowriad]

Can we do a push to fix the remaining warnings here?

[coreymckrill]

Looks like there is also usage of componentWillMount in the Latest Posts block. Would that fall within the scope of this issue?

[aduth]

Looks like there is also usage of componentWillMount in the Latest Posts block. Would that fall within the scope of this issue?

I expect so, yes (and for any other occurrence of componentWillMount, if exists).

Edit: Updated original comment.

[notnownikki]

PR for LatestPostsEdit is at https://github.com/WordPress/gutenberg/pull/14637

[aduth]

Question: Will using the UNSAFE_-prefixed methods trigger StrictMode warnings? While I'd love to avoid them altogether, I'm personally more inclined to see us using development modes in E2E sooner than later to catch other, legitimate, present issues (related discussion).

Edit: Follow-up issue for SCRIPT_DEBUG at #14845

[chiraggmodi]

any update on how to solve this issue?

[aduth]

@chiraggmodi The warnings logged from the React unsafe methods are not ideal, but are safe to ignore. This issue serves as to track progress from the task of updating individual components to avoid warnings being logged, as they are not future-compatible. Feel free to take on any of the items listed which have not been claimed, if you are able to assist in this upgrade.

[gziolo]

It looks like componentWillUpdate in Fill component which blocks us from enabling SCRIPT_DEBUG in e2e tests env. Is anyone working on it?

[youknowriad]

I'd really want us to close this issue. I know the Fill issue is not easy though.
Some people running WP in SCRIPT_DEBUG true are getting confused with these warnings.

[gziolo]

I'd really want us to close this issue. I know the Fill issue is not easy though.
Some people running WP in SCRIPT_DEBUG true are getting confused with these warnings.

Has anyone tried using getSnapshotBeforeUpdate instead?

[youknowriad]

Most of the warnings are now gone when you open the editor. I'm going to close this at the moment. Let's consider any future warnings as bugs.

[aduth]

14851 will resolve some StrictMode errors for Popover usage (findDOMNode). An issue should be created to remove all findDOMNode warnings caused as a result of using react-click-outside (remove react-click-outside in similar refactoring, only used elsewhere in Modal). Remind me to create this if I forget.

14845 should be considered a follow-up task here (enable development React and thereby StrictMode in end-to-end testing environments for error log capturing).

[youknowriad]

@aduth I created this #15790 to track the Modal refactoring