Closed Bug 1508688 Opened 4 years ago Closed 2 months ago

Add `UNSAFE_` prefix to React deprecated lifecycle methods

Categories

(DevTools :: General, task, P3)

task

Tracking

(firefox103 fixed)

RESOLVED FIXED
103 Branch
Tracking Status
firefox103 --- fixed

People

(Reporter: ladybenko, Assigned: tetsuharu)

References

(Blocks 2 open bugs)

Details

Attachments

(11 files)

48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
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).
As a note, on React 17 these methods will still exist, but with a `UNSAFE_` prefix.

(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.)

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

Priority: -- → P3

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

Blocks: 1774507

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

Assignee: nobody → tetsuharu.ohzeki
Status: NEW → ASSIGNED

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

No longer blocks: remote-debugging-ng
Type: enhancement → task
Component: about:debugging → General
Summary: Remove deprecated React lifecycle methods → Add `UNSAFE_` prefix to React deprecated lifecycle methods
Pushed by tetsuharu.ohzeki@gmail.com:
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
You need to log in before you can comment on or make changes to this bug.