1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods

Status: RESOLVED FIXED

(DevTools :: General, task, P3)

Description

[Belén [:ladybenko]]

Some React component lifecycle methods are going to be removed from React 17
https://hackernoon.com/problematic-react-lifecycle-methods-are-going-away-in-react-17-4216acc7d58b

We should make sure our code doesn't use them (currently the patch on https://bugzilla.mozilla.org/show_bug.cgi?id=1479746 uses `componentWillMount`).

We should also introduce a linter rule to avoid using these in the future (see https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md).

Comment 1

[Belén [:ladybenko]]

As a note, on React 17 these methods will still exist, but with a `UNSAFE_` prefix.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to Belén [:ladybenko] from comment #1)

As a note, on React 17 these methods will still exist, but with a UNSAFE_
prefix.

Actually, they will be removed in 17.0... here is the migration path:

• 16.3: Introduce aliases for the unsafe lifecycles, UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, and UNSAFE_componentWillUpdate. (Both the old lifecycle names and the new aliases will work in this release.)
• A future 16.x release: Enable deprecation warning for componentWillMount, componentWillReceiveProps, and componentWillUpdate. (Both the old lifecycle names and the new aliases will work in this release, but the old names will log a DEV-mode warning.)
• 17.0: Remove componentWillMount, componentWillReceiveProps, and componentWillUpdate . (Only the new “UNSAFE_” lifecycle names will work from this point forward.)

Comment 3

[Julian Descottes [:jdescottes]]

As you say in the last bullet point Only the new “UNSAFE_” lifecycle names will work from this point forward. So that's the same as what :ladybenko said in comment #1

Comment 4

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Probably we can use this script to rename them
https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles

Comment 5

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

(In reply to Tetsuharu OHZEKI [:tetsuharu] (UTC+9) from comment #4)

Probably we can use this script to rename them
https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles

This script works well.
I'll take this.

Comment 6

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add 'UNSAFE_' lifecycle methods to 'react/sort-comp' rule for devtools/.

Comment 7

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/aboutdebugging/.

Comment 8

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/accessibility/.

Comment 9

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/debugger/.

Comment 10

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/framework/.

Comment 11

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/inspector/.

Comment 12

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/netmonitor/.

Comment 13

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/responsive/.

Comment 14

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/shared/.

Comment 15

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/webconsole/.

Comment 16

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

Attachment: Bug 1508688 - Enable 'react/no-deprecated' ESLint rule for devtools/.

This enables https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Comment 17

[Nicolas Chevobbe [:nchevobbe]]

Moving to General as Tetsuharu patches cover the whole DevTools codebase and Bug 1774507 was added to actually remove those

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/57c458e03d13
Add 'UNSAFE_' lifecycle methods to 'react/sort-comp' rule for devtools/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/b55d74e32d80
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/aboutdebugging/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/0e9065aceda9
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/accessibility/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/e4d4b5d97964
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/debugger/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/0696b251d05b
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/framework/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/c60b6b4b8e05
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/inspector/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/2edcfb56a5b3
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/netmonitor/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/9e180a5e537e
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/responsive/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/d0d38a13dd1d
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/shared/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/b33c102a1d59
Add `UNSAFE_` prefix to React deprecated lifecycle methods in devtools/client/webconsole/. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/569f2357ff4e
Enable 'react/no-deprecated' ESLint rule for devtools/. r=devtools-reviewers,nchevobbe

Comment 19

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/57c458e03d13
https://hg.mozilla.org/mozilla-central/rev/b55d74e32d80
https://hg.mozilla.org/mozilla-central/rev/0e9065aceda9
https://hg.mozilla.org/mozilla-central/rev/e4d4b5d97964
https://hg.mozilla.org/mozilla-central/rev/0696b251d05b
https://hg.mozilla.org/mozilla-central/rev/c60b6b4b8e05
https://hg.mozilla.org/mozilla-central/rev/2edcfb56a5b3
https://hg.mozilla.org/mozilla-central/rev/9e180a5e537e
https://hg.mozilla.org/mozilla-central/rev/d0d38a13dd1d
https://hg.mozilla.org/mozilla-central/rev/b33c102a1d59
https://hg.mozilla.org/mozilla-central/rev/569f2357ff4e