Skip to content

Commit b4d0e73

Browse files
threepointonethreepointone
committed
unify deprecated/unsafe lifecycle warnings, pass tests
- redoes facebook#15431 from scratch, taking on the feedback there - unifies the messaging between "deprecated" and UNSAFE_ lifecycle messages. It reorganizes ReactStrictModeWarnings.js to capture and flush all the lifecycle warnings in one procedure each. - matches the warning from ReactPartialRenderer to match the above change - passes all the tests - this also turns on `warnAboutDeprecatedLifecycles` for the test renderer. I think we missed doing so it previously. In a future PR, I'll remove the feature flag altogether. - this DOES NOT do the same treatment for context warnings, I'll do that in another PR too
1 parent 8533c0a commit b4d0e73

15 files changed

+347
-393
lines changed

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

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -709,9 +709,9 @@ describe('ReactComponentLifeCycle', () => {
709709
);
710710
}).toLowPriorityWarnDev(
711711
[
712-
'componentWillMount is deprecated',
713-
'componentWillReceiveProps is deprecated',
714-
'componentWillUpdate is deprecated',
712+
'Using componentWillMount is not recommended',
713+
'Using componentWillReceiveProps is not recommended',
714+
'Using componentWillUpdate is not recommended',
715715
],
716716
{withoutStack: true},
717717
);
@@ -748,9 +748,9 @@ describe('ReactComponentLifeCycle', () => {
748748
);
749749
}).toLowPriorityWarnDev(
750750
[
751-
'componentWillMount is deprecated',
752-
'componentWillReceiveProps is deprecated',
753-
'componentWillUpdate is deprecated',
751+
'Using componentWillMount is not recommended',
752+
'Using componentWillReceiveProps is not recommended',
753+
'Using componentWillUpdate is not recommended',
754754
],
755755
{withoutStack: true},
756756
);
@@ -815,7 +815,10 @@ describe('ReactComponentLifeCycle', () => {
815815
{withoutStack: true},
816816
);
817817
}).toLowPriorityWarnDev(
818-
['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
818+
[
819+
'Using componentWillMount is not recommended',
820+
'Using componentWillUpdate is not recommended',
821+
],
819822
{withoutStack: true},
820823
);
821824

@@ -863,7 +866,7 @@ describe('ReactComponentLifeCycle', () => {
863866
'https://fb.me/react-async-component-lifecycle-hooks',
864867
{withoutStack: true},
865868
);
866-
}).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
869+
}).toLowPriorityWarnDev(['Using componentWillMount is not recommended'], {
867870
withoutStack: true,
868871
});
869872

@@ -887,9 +890,12 @@ describe('ReactComponentLifeCycle', () => {
887890
'https://fb.me/react-async-component-lifecycle-hooks',
888891
{withoutStack: true},
889892
);
890-
}).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
891-
withoutStack: true,
892-
});
893+
}).toLowPriorityWarnDev(
894+
['Using componentWillReceiveProps is not recommended'],
895+
{
896+
withoutStack: true,
897+
},
898+
);
893899
});
894900

895901
it('should warn about deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', () => {
@@ -921,7 +927,10 @@ describe('ReactComponentLifeCycle', () => {
921927
{withoutStack: true},
922928
);
923929
}).toLowPriorityWarnDev(
924-
['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
930+
[
931+
'Using componentWillMount is not recommended',
932+
'Using componentWillUpdate is not recommended',
933+
],
925934
{withoutStack: true},
926935
);
927936

@@ -967,7 +976,7 @@ describe('ReactComponentLifeCycle', () => {
967976
'https://fb.me/react-async-component-lifecycle-hooks',
968977
{withoutStack: true},
969978
);
970-
}).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
979+
}).toLowPriorityWarnDev(['Using componentWillMount is not recommended'], {
971980
withoutStack: true,
972981
});
973982

@@ -990,9 +999,12 @@ describe('ReactComponentLifeCycle', () => {
990999
'https://fb.me/react-async-component-lifecycle-hooks',
9911000
{withoutStack: true},
9921001
);
993-
}).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
994-
withoutStack: true,
995-
});
1002+
}).toLowPriorityWarnDev(
1003+
['Using componentWillReceiveProps is not recommended'],
1004+
{
1005+
withoutStack: true,
1006+
},
1007+
);
9961008
});
9971009

9981010
it('calls effects on module-pattern component', function() {
@@ -1130,9 +1142,9 @@ describe('ReactComponentLifeCycle', () => {
11301142
ReactDOM.render(<MyComponent foo="bar" />, div),
11311143
).toLowPriorityWarnDev(
11321144
[
1133-
'componentWillMount is deprecated',
1134-
'componentWillReceiveProps is deprecated',
1135-
'componentWillUpdate is deprecated',
1145+
'Using componentWillMount is not recommended',
1146+
'Using componentWillReceiveProps is not recommended',
1147+
'Using componentWillUpdate is not recommended',
11361148
],
11371149
{withoutStack: true},
11381150
);
@@ -1403,17 +1415,9 @@ describe('ReactComponentLifeCycle', () => {
14031415
ReactDOM.render(<MyComponent x={1} />, container),
14041416
).toLowPriorityWarnDev(
14051417
[
1406-
'componentWillMount is deprecated and will be removed in the next major version. ' +
1407-
'Use componentDidMount instead. As a temporary workaround, ' +
1408-
'you can rename to UNSAFE_componentWillMount.' +
1409-
'\n\nPlease update the following components: MyComponent',
1410-
'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
1411-
'Use static getDerivedStateFromProps instead.' +
1412-
'\n\nPlease update the following components: MyComponent',
1413-
'componentWillUpdate is deprecated and will be removed in the next major version. ' +
1414-
'Use componentDidUpdate instead. As a temporary workaround, ' +
1415-
'you can rename to UNSAFE_componentWillUpdate.' +
1416-
'\n\nPlease update the following components: MyComponent',
1418+
'Using componentWillMount is not recommended',
1419+
'Using componentWillReceiveProps is not recommended',
1420+
'Using componentWillUpdate is not recommended',
14171421
],
14181422
{withoutStack: true},
14191423
);

‎packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ describe('ReactDOMServerLifecycles', () => {
229229

230230
expect(() =>
231231
ReactDOMServer.renderToString(<Component />),
232-
).toLowPriorityWarnDev('componentWillMount() is deprecated', {
232+
).toLowPriorityWarnDev('Using componentWillMount is not recommended', {
233233
withoutStack: true,
234234
});
235235
expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);
@@ -286,10 +286,9 @@ describe('ReactDOMServerLifecycles', () => {
286286

287287
expect(() =>
288288
ReactDOMServer.renderToString(<Component />),
289-
).toLowPriorityWarnDev(
290-
'Component: componentWillMount() is deprecated and will be removed in the next major version.',
291-
{withoutStack: true},
292-
);
289+
).toLowPriorityWarnDev('Using componentWillMount is not recommended', {
290+
withoutStack: true,
291+
});
293292
});
294293

295294
it('should warn about deprecated lifecycle hooks', () => {
@@ -302,11 +301,9 @@ describe('ReactDOMServerLifecycles', () => {
302301

303302
expect(() =>
304303
ReactDOMServer.renderToString(<Component />),
305-
).toLowPriorityWarnDev(
306-
'Warning: Component: componentWillMount() is deprecated and will be removed ' +
307-
'in the next major version.',
308-
{withoutStack: true},
309-
);
304+
).toLowPriorityWarnDev('Using componentWillMount is not recommended', {
305+
withoutStack: true,
306+
});
310307

311308
// De-duped
312309
ReactDOMServer.renderToString(<Component />);

‎packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -362,20 +362,16 @@ describe('ReactDOMServerHydration', () => {
362362
const element = document.createElement('div');
363363
expect(() => {
364364
element.innerHTML = ReactDOMServer.renderToString(markup);
365-
}).toLowPriorityWarnDev(
366-
['componentWillMount() is deprecated and will be removed'],
367-
{withoutStack: true},
368-
);
365+
}).toLowPriorityWarnDev(['Using componentWillMount is not recommended'], {
366+
withoutStack: true,
367+
});
369368
expect(element.textContent).toBe('Hi');
370369

371370
expect(() => {
372-
expect(() => ReactDOM.hydrate(markup, element)).toWarnDev(
373-
'Please update the following components to use componentDidMount instead: ComponentWithWarning',
374-
);
375-
}).toLowPriorityWarnDev(
376-
['componentWillMount is deprecated and will be removed'],
377-
{withoutStack: true},
378-
);
371+
ReactDOM.hydrate(markup, element);
372+
}).toLowPriorityWarnDev(['Using componentWillMount is not recommended'], {
373+
withoutStack: true,
374+
});
379375
expect(element.textContent).toBe('Hi');
380376
});
381377

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -572,13 +572,12 @@ function resolve(
572572
if (!didWarnAboutDeprecatedWillMount[componentName]) {
573573
lowPriorityWarning(
574574
false,
575-
'%s: componentWillMount() is deprecated and will be ' +
576-
'removed in the next major version. Read about the motivations ' +
577-
'behind this change: ' +
578-
'https://fb.me/react-async-component-lifecycle-hooks' +
579-
'\n\n' +
580-
'As a temporary workaround, you can rename to ' +
581-
'UNSAFE_componentWillMount instead.',
575+
// keep this warning in sync with ReactStrictModeWarning.js
576+
'Using componentWillMount is not recommended and may indicate bugs in your code. ' +
577+
'See https://fb.me/react-async-component-lifecycle-hooks for details.\n\n' +
578+
'* Move component logic from componentWillMount into componentDidMount (preferred in most cases) ' +
579+
'or the constructor.\n' +
580+
'\nPlease update the following components: %s',
582581
componentName,
583582
);
584583
didWarnAboutDeprecatedWillMount[componentName] = true;

‎packages/react-reconciler/src/ReactFiberClassComponent.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -806,11 +806,6 @@ function mountClassInstance(
806806
}
807807

808808
if (workInProgress.mode & StrictMode) {
809-
ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
810-
workInProgress,
811-
instance,
812-
);
813-
814809
ReactStrictModeWarnings.recordLegacyContextWarning(
815810
workInProgress,
816811
instance,

‎packages/react-reconciler/src/ReactFiberWorkLoop.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2247,7 +2247,6 @@ function checkForNestedUpdates() {
22472247

22482248
function flushRenderPhaseStrictModeWarningsInDEV() {
22492249
if (__DEV__) {
2250-
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
22512250
ReactStrictModeWarnings.flushLegacyContextWarning();
22522251

22532252
if (warnAboutDeprecatedLifecycles) {

0 commit comments

Comments
 (0)