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)

• Remove findDOMNode from Tooltip Remove findDOMNode from Tooltip component #11169
• Remove findDOMNode from DropZone Provider Try avoiding the deprecated findDOMNode API from DropZone Provider #11168
• Remove findDOMNode from Block Leverage forwardRef to remove findDOMNode from the block component #11170
• Remove findDOMNode from the inserter Remove findDOMNode usage from the inserter #11363
• Remove findDOMNode from NavigableToolbar Remove findDOMNode usage from the NavigableToolbar component #11401
• Remove findDOMNode from withHoverAreas Remove findDomNode from withHoverAreas by making a render prop component #11407
• Remove old context API from Slot/Fill Update SlotFillProvider to the new context API #11123
• Remove componentWillMount from LatestPostsEdit Remove componentWillMount from LatestPostsEdit #14637
• Remove componentWillUpdate from the Fill component Refactor fill component to avoid relying on componentWillUpdate and use React Hooks instead #15541
• Remove componentWillReceiveProps from TinyMCE Rich Text: Update TinyMCE component to use componentDidUpdate #8148 Remove deprecated componentWillReceiveProps from TinyMCE component #11368
• Investigate and Remove componentWillReceiveProps from Resizable (it's React Native code)
• Remove componentWillReceiveProps from Input at ColorPicker component Remove componentWillReceiveProps from ColorPicker #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.

[oandregal]

Riad, #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

[oandregal]

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?

[oandregal]

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 #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