Skip to content

Commit ec7b480

Browse files
committed
unify deprecated/unsafe lifecycle warnings, pass tests
- redoes #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 ec7b480

17 files changed

+325
-394
lines changed

fixtures/dom/public/act-dom.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
this page tests whether act runs properly in a browser.
88
<br />
99
your console should say "5"
10+
<div id='app'/>
1011
<script src="scheduler-unstable_mock.development.js"></script>
1112
<script src="react.development.js"></script>
1213
<script type="text/javascript">

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

+24-26
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+
'componentWillMount has been renamed',
713+
'componentWillReceiveProps has been renamed',
714+
'componentWillUpdate has been renamed',
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+
'componentWillMount has been renamed',
752+
'componentWillReceiveProps has been renamed',
753+
'componentWillUpdate has been renamed',
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+
'componentWillMount has been renamed',
820+
'componentWillUpdate has been renamed',
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(['componentWillMount has been renamed'], {
867870
withoutStack: true,
868871
});
869872

@@ -887,7 +890,7 @@ describe('ReactComponentLifeCycle', () => {
887890
'https://fb.me/react-async-component-lifecycle-hooks',
888891
{withoutStack: true},
889892
);
890-
}).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
893+
}).toLowPriorityWarnDev(['componentWillReceiveProps has been renamed'], {
891894
withoutStack: true,
892895
});
893896
});
@@ -921,7 +924,10 @@ describe('ReactComponentLifeCycle', () => {
921924
{withoutStack: true},
922925
);
923926
}).toLowPriorityWarnDev(
924-
['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
927+
[
928+
'componentWillMount has been renamed',
929+
'componentWillUpdate has been renamed',
930+
],
925931
{withoutStack: true},
926932
);
927933

@@ -967,7 +973,7 @@ describe('ReactComponentLifeCycle', () => {
967973
'https://fb.me/react-async-component-lifecycle-hooks',
968974
{withoutStack: true},
969975
);
970-
}).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
976+
}).toLowPriorityWarnDev(['componentWillMount has been renamed'], {
971977
withoutStack: true,
972978
});
973979

@@ -990,7 +996,7 @@ describe('ReactComponentLifeCycle', () => {
990996
'https://fb.me/react-async-component-lifecycle-hooks',
991997
{withoutStack: true},
992998
);
993-
}).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
999+
}).toLowPriorityWarnDev(['componentWillReceiveProps has been renamed'], {
9941000
withoutStack: true,
9951001
});
9961002
});
@@ -1130,9 +1136,9 @@ describe('ReactComponentLifeCycle', () => {
11301136
ReactDOM.render(<MyComponent foo="bar" />, div),
11311137
).toLowPriorityWarnDev(
11321138
[
1133-
'componentWillMount is deprecated',
1134-
'componentWillReceiveProps is deprecated',
1135-
'componentWillUpdate is deprecated',
1139+
'componentWillMount has been renamed',
1140+
'componentWillReceiveProps has been renamed',
1141+
'componentWillUpdate has been renamed',
11361142
],
11371143
{withoutStack: true},
11381144
);
@@ -1403,17 +1409,9 @@ describe('ReactComponentLifeCycle', () => {
14031409
ReactDOM.render(<MyComponent x={1} />, container),
14041410
).toLowPriorityWarnDev(
14051411
[
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',
1412+
'componentWillMount has been renamed',
1413+
'componentWillReceiveProps has been renamed',
1414+
'componentWillUpdate has been renamed',
14171415
],
14181416
{withoutStack: true},
14191417
);

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

+7-10
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('componentWillMount has been renamed', {
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('componentWillMount has been renamed', {
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('componentWillMount has been renamed', {
305+
withoutStack: true,
306+
});
310307

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

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

+7-11
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(['componentWillMount has been renamed'], {
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(['componentWillMount has been renamed'], {
373+
withoutStack: true,
374+
});
379375
expect(element.textContent).toBe('Hi');
380376
});
381377

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

+6-7
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+
'componentWillMount has been renamed, and is not recommended for use. ' +
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

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

-1
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)