Skip to content

Commit 66a4742

Browse files
author
Sunil Pai
authored
use a different link in the UNSAFE_ component warnings (#16321)
When React detects a deprectated/unsafe lifecycle method, the warning points to a page with more details on the why/what of the warning. However, the actual link (https://fb.me/react-async-component-lifecycle-hooks) uses the phrase "lifecycle-hooks" which is confusing since it doesn't have anything to do with hooks. This PR changes the link to something less confusing - https://fb.me/react-unsafe-component-lifecycles.
1 parent 8d54038 commit 66a4742

File tree

6 files changed

+30
-30
lines changed

6 files changed

+30
-30
lines changed

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -811,7 +811,7 @@ describe('ReactComponentLifeCycle', () => {
811811
' UNSAFE_componentWillReceiveProps\n' +
812812
' componentWillUpdate\n\n' +
813813
'The above lifecycles should be removed. Learn more about this warning here:\n' +
814-
'https://fb.me/react-async-component-lifecycle-hooks',
814+
'https://fb.me/react-unsafe-component-lifecycles',
815815
{withoutStack: true},
816816
);
817817
}).toLowPriorityWarnDev(
@@ -838,7 +838,7 @@ describe('ReactComponentLifeCycle', () => {
838838
'WillMount uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
839839
' UNSAFE_componentWillMount\n\n' +
840840
'The above lifecycles should be removed. Learn more about this warning here:\n' +
841-
'https://fb.me/react-async-component-lifecycle-hooks',
841+
'https://fb.me/react-unsafe-component-lifecycles',
842842
{withoutStack: true},
843843
);
844844

@@ -863,7 +863,7 @@ describe('ReactComponentLifeCycle', () => {
863863
' componentWillMount\n' +
864864
' UNSAFE_componentWillUpdate\n\n' +
865865
'The above lifecycles should be removed. Learn more about this warning here:\n' +
866-
'https://fb.me/react-async-component-lifecycle-hooks',
866+
'https://fb.me/react-unsafe-component-lifecycles',
867867
{withoutStack: true},
868868
);
869869
}).toLowPriorityWarnDev(['componentWillMount has been renamed'], {
@@ -887,7 +887,7 @@ describe('ReactComponentLifeCycle', () => {
887887
'WillReceiveProps uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
888888
' componentWillReceiveProps\n\n' +
889889
'The above lifecycles should be removed. Learn more about this warning here:\n' +
890-
'https://fb.me/react-async-component-lifecycle-hooks',
890+
'https://fb.me/react-unsafe-component-lifecycles',
891891
{withoutStack: true},
892892
);
893893
}).toLowPriorityWarnDev(['componentWillReceiveProps has been renamed'], {
@@ -920,7 +920,7 @@ describe('ReactComponentLifeCycle', () => {
920920
' UNSAFE_componentWillReceiveProps\n' +
921921
' componentWillUpdate\n\n' +
922922
'The above lifecycles should be removed. Learn more about this warning here:\n' +
923-
'https://fb.me/react-async-component-lifecycle-hooks',
923+
'https://fb.me/react-unsafe-component-lifecycles',
924924
{withoutStack: true},
925925
);
926926
}).toLowPriorityWarnDev(
@@ -946,7 +946,7 @@ describe('ReactComponentLifeCycle', () => {
946946
'WillMount uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
947947
' UNSAFE_componentWillMount\n\n' +
948948
'The above lifecycles should be removed. Learn more about this warning here:\n' +
949-
'https://fb.me/react-async-component-lifecycle-hooks',
949+
'https://fb.me/react-unsafe-component-lifecycles',
950950
{withoutStack: true},
951951
);
952952

@@ -970,7 +970,7 @@ describe('ReactComponentLifeCycle', () => {
970970
' componentWillMount\n' +
971971
' UNSAFE_componentWillUpdate\n\n' +
972972
'The above lifecycles should be removed. Learn more about this warning here:\n' +
973-
'https://fb.me/react-async-component-lifecycle-hooks',
973+
'https://fb.me/react-unsafe-component-lifecycles',
974974
{withoutStack: true},
975975
);
976976
}).toLowPriorityWarnDev(['componentWillMount has been renamed'], {
@@ -993,7 +993,7 @@ describe('ReactComponentLifeCycle', () => {
993993
'WillReceiveProps uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
994994
' componentWillReceiveProps\n\n' +
995995
'The above lifecycles should be removed. Learn more about this warning here:\n' +
996-
'https://fb.me/react-async-component-lifecycle-hooks',
996+
'https://fb.me/react-unsafe-component-lifecycles',
997997
{withoutStack: true},
998998
);
999999
}).toLowPriorityWarnDev(['componentWillReceiveProps has been renamed'], {
@@ -1410,20 +1410,20 @@ describe('ReactComponentLifeCycle', () => {
14101410
).toLowPriorityWarnDev(
14111411
[
14121412
/* eslint-disable max-len */
1413-
`Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
1413+
`Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
14141414
14151415
* Move code with side effects to componentDidMount, and set initial state in the constructor.
14161416
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
14171417
14181418
Please update the following components: MyComponent`,
1419-
`Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
1419+
`Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
14201420
14211421
* Move data fetching code or side effects to componentDidUpdate.
14221422
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
14231423
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
14241424
14251425
Please update the following components: MyComponent`,
1426-
`Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
1426+
`Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
14271427
14281428
* Move data fetching code or side effects to componentDidUpdate.
14291429
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.

packages/react-dom/src/server/ReactPartialRenderer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -583,7 +583,7 @@ function resolve(
583583
false,
584584
// keep this warning in sync with ReactStrictModeWarning.js
585585
'componentWillMount has been renamed, and is not recommended for use. ' +
586-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
586+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
587587
'* Move code from componentWillMount to componentDidMount (preferred in most cases) ' +
588588
'or the constructor.\n' +
589589
'\nPlease update the following components: %s',

packages/react-reconciler/src/ReactFiberClassComponent.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -702,7 +702,7 @@ function constructClassInstance(
702702
'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
703703
'%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' +
704704
'The above lifecycles should be removed. Learn more about this warning here:\n' +
705-
'https://fb.me/react-async-component-lifecycle-hooks',
705+
'https://fb.me/react-unsafe-component-lifecycles',
706706
componentName,
707707
newApiName,
708708
foundWillMountName !== null ? `\n ${foundWillMountName}` : '',

packages/react-reconciler/src/ReactStrictModeWarnings.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ if (__DEV__) {
194194
warningWithoutStack(
195195
false,
196196
'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +
197-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
197+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
198198
'* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
199199
'\nPlease update the following components: %s',
200200
sortedNames,
@@ -209,7 +209,7 @@ if (__DEV__) {
209209
false,
210210
'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' +
211211
'and may indicate bugs in your code. ' +
212-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
212+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
213213
'* Move data fetching code or side effects to componentDidUpdate.\n' +
214214
"* If you're updating state whenever props change, " +
215215
'refactor your code to use memoization techniques or move it to ' +
@@ -227,7 +227,7 @@ if (__DEV__) {
227227
false,
228228
'Using UNSAFE_componentWillUpdate in strict mode is not recommended ' +
229229
'and may indicate bugs in your code. ' +
230-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
230+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
231231
'* Move data fetching code or side effects to componentDidUpdate.\n' +
232232
'\nPlease update the following components: %s',
233233
sortedNames,
@@ -240,7 +240,7 @@ if (__DEV__) {
240240
lowPriorityWarning(
241241
false,
242242
'componentWillMount has been renamed, and is not recommended for use. ' +
243-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
243+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
244244
'* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
245245
'* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' +
246246
'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' +
@@ -259,7 +259,7 @@ if (__DEV__) {
259259
lowPriorityWarning(
260260
false,
261261
'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
262-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
262+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
263263
'* Move data fetching code or side effects to componentDidUpdate.\n' +
264264
"* If you're updating state whenever props change, refactor your " +
265265
'code to use memoization techniques or move it to ' +
@@ -279,7 +279,7 @@ if (__DEV__) {
279279
lowPriorityWarning(
280280
false,
281281
'componentWillUpdate has been renamed, and is not recommended for use. ' +
282-
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
282+
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
283283
'* Move data fetching code or side effects to componentDidUpdate.\n' +
284284
'* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' +
285285
'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' +

packages/react/src/__tests__/ReactStrictMode-test.internal.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -351,18 +351,18 @@ describe('ReactStrictMode', () => {
351351
expect(() => Scheduler.unstable_flushAll()).toWarnDev(
352352
[
353353
/* eslint-disable max-len */
354-
`Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-async-component-lifecycle-hooks for details.
354+
`Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
355355
356356
* Move code with side effects to componentDidMount, and set initial state in the constructor.
357357
358358
Please update the following components: AsyncRoot`,
359-
`Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-async-component-lifecycle-hooks for details.
359+
`Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
360360
361361
* Move data fetching code or side effects to componentDidUpdate.
362362
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
363363
364364
Please update the following components: Bar, Foo`,
365-
`Warning: Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-async-component-lifecycle-hooks for details.
365+
`Warning: Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
366366
367367
* Move data fetching code or side effects to componentDidUpdate.
368368
@@ -409,18 +409,18 @@ Please update the following components: AsyncRoot`,
409409
expect(() => Scheduler.unstable_flushAll()).toWarnDev(
410410
[
411411
/* eslint-disable max-len */
412-
`Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-async-component-lifecycle-hooks for details.
412+
`Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
413413
414414
* Move code with side effects to componentDidMount, and set initial state in the constructor.
415415
416416
Please update the following components: AsyncRoot`,
417-
`Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-async-component-lifecycle-hooks for details.
417+
`Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
418418
419419
* Move data fetching code or side effects to componentDidUpdate.
420420
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
421421
422422
Please update the following components: Child`,
423-
`Warning: Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-async-component-lifecycle-hooks for details.
423+
`Warning: Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
424424
425425
* Move data fetching code or side effects to componentDidUpdate.
426426
@@ -432,20 +432,20 @@ Please update the following components: AsyncRoot`,
432432
}).toLowPriorityWarnDev(
433433
[
434434
/* eslint-disable max-len */
435-
`Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
435+
`Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
436436
437437
* Move code with side effects to componentDidMount, and set initial state in the constructor.
438438
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
439439
440440
Please update the following components: Parent`,
441-
`Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
441+
`Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
442442
443443
* Move data fetching code or side effects to componentDidUpdate.
444444
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
445445
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
446446
447447
Please update the following components: Parent`,
448-
`Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
448+
`Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
449449
450450
* Move data fetching code or side effects to componentDidUpdate.
451451
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.

packages/react/src/__tests__/createReactClassIntegration-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -559,7 +559,7 @@ describe('create-react-class-integration', () => {
559559
' componentWillReceiveProps\n' +
560560
' componentWillUpdate\n\n' +
561561
'The above lifecycles should be removed. Learn more about this warning here:\n' +
562-
'https://fb.me/react-async-component-lifecycle-hooks',
562+
'https://fb.me/react-unsafe-component-lifecycles',
563563
{withoutStack: true},
564564
);
565565
}).toLowPriorityWarnDev(
@@ -603,7 +603,7 @@ describe('create-react-class-integration', () => {
603603
' componentWillReceiveProps\n' +
604604
' componentWillUpdate\n\n' +
605605
'The above lifecycles should be removed. Learn more about this warning here:\n' +
606-
'https://fb.me/react-async-component-lifecycle-hooks',
606+
'https://fb.me/react-unsafe-component-lifecycles',
607607
{withoutStack: true},
608608
);
609609
}).toLowPriorityWarnDev(

0 commit comments

Comments
 (0)