StrictMode should not warn about polyfilled getSnapshotBeforeUpdate (#12647)
* Installed 3.x release of react-lifecycles-compat * Updated ReactComponentLifeCycle-test and ReactDOMServerLifecycles-test to cover both polyfilled lifecycles in StrictMode * Updated StrictMode warnings to not warn about polyfilled getSnapshotBeforeUpdate
Brian Vaughn committed
Apr 19, 2018 at 09:08 UTC
f80bbf88e5278cab9aca7206a1f241e33f3f674b
5 files changed
+55
-30
package.json
+1
-1
@@ -82,7 +82,7 @@
82
"prettier": "1.11.1",
83
"prop-types": "^15.6.0",
84
"random-seed": "^0.3.0",
85
- "react-lifecycles-compat": "^1.0.2",
85
+ "react-lifecycles-compat": "^3.0.2",
86
"rimraf": "^2.6.1",
87
"rollup": "^0.52.1",
88
"rollup-plugin-babel": "^3.0.1",
packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js
+13
-10
@@ -63,9 +63,9 @@ describe('ReactComponentLifeCycle', () => {
63
});
64
65
describe('react-lifecycles-compat', () => {
66
- const polyfill = require('react-lifecycles-compat');
66
+ const {polyfill} = require('react-lifecycles-compat');
67
68
- it('should not warn about deprecated cWM/cWRP for polyfilled components', () => {
68
+ it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
69
class PolyfilledComponent extends React.Component {
70
state = {};
71
static getDerivedStateFromProps() {
@@ -79,17 +79,20 @@ describe('ReactComponentLifeCycle', () => {
79
polyfill(PolyfilledComponent);
80
81
const container = document.createElement('div');
82
- ReactDOM.render(<PolyfilledComponent />, container);
82
+ ReactDOM.render(
83
+ <React.StrictMode>
84
+ <PolyfilledComponent />
85
+ </React.StrictMode>,
86
+ container,
87
+ );
88
});
89
85
- it('should not warn about unsafe lifecycles within "strict" tree for polyfilled components', () => {
86
- const {StrictMode} = React;
87
-
90
+ it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
91
class PolyfilledComponent extends React.Component {
89
- state = {};
90
- static getDerivedStateFromProps() {
92
+ getSnapshotBeforeUpdate() {
93
return null;
94
}
95
+ componentDidUpdate() {}
96
render() {
97
return null;
98
}
@@ -99,9 +102,9 @@ describe('ReactComponentLifeCycle', () => {
102
103
const container = document.createElement('div');
104
ReactDOM.render(
102
- <StrictMode>
105
+ <React.StrictMode>
106
<PolyfilledComponent />
104
- </StrictMode>,
107
+ </React.StrictMode>,
108
container,
109
);
110
});
packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js
+31
-3
@@ -69,9 +69,9 @@ describe('ReactDOMServerLifecycles', () => {
69
});
70
71
describe('react-lifecycles-compat', () => {
72
- const polyfill = require('react-lifecycles-compat');
72
+ const {polyfill} = require('react-lifecycles-compat');
73
74
- it('should not warn about deprecated cWM/cWRP for polyfilled components', () => {
74
+ it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
75
class PolyfilledComponent extends React.Component {
76
state = {};
77
static getDerivedStateFromProps() {
@@ -84,7 +84,35 @@ describe('ReactDOMServerLifecycles', () => {
84
85
polyfill(PolyfilledComponent);
86
87
- ReactDOMServer.renderToString(<PolyfilledComponent />);
87
+ const container = document.createElement('div');
88
+ ReactDOMServer.renderToString(
89
+ <React.StrictMode>
90
+ <PolyfilledComponent />
91
+ </React.StrictMode>,
92
+ container,
93
+ );
94
+ });
95
+
96
+ it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
97
+ class PolyfilledComponent extends React.Component {
98
+ getSnapshotBeforeUpdate() {
99
+ return null;
100
+ }
101
+ componentDidUpdate() {}
102
+ render() {
103
+ return null;
104
+ }
105
+ }
106
+
107
+ polyfill(PolyfilledComponent);
108
+
109
+ const container = document.createElement('div');
110
+ ReactDOMServer.renderToString(
111
+ <React.StrictMode>
112
+ <PolyfilledComponent />
113
+ </React.StrictMode>,
114
+ container,
115
+ );
116
});
117
});
118
});
packages/react-reconciler/src/ReactStrictModeWarnings.js
+7
-13
@@ -236,16 +236,6 @@ if (__DEV__) {
236
return;
237
}
238
239
- // Don't warn about react-lifecycles-compat polyfilled components.
240
- // Note that it is sufficient to check for the presence of a
241
- // single lifecycle, componentWillMount, with the polyfill flag.
242
- if (
243
- typeof instance.componentWillMount === 'function' &&
244
- instance.componentWillMount.__suppressDeprecationWarning === true
245
- ) {
246
- return;
247
- }
248
-
239
let warningsForRoot;
240
if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {
241
warningsForRoot = {
@@ -261,19 +251,23 @@ if (__DEV__) {
251
252
const unsafeLifecycles = [];
253
if (
264
- typeof instance.componentWillMount === 'function' ||
254
+ (typeof instance.componentWillMount === 'function' &&
255
+ instance.componentWillMount.__suppressDeprecationWarning !== true) ||
256
typeof instance.UNSAFE_componentWillMount === 'function'
257
) {
258
unsafeLifecycles.push('UNSAFE_componentWillMount');
259
}
260
if (
270
- typeof instance.componentWillReceiveProps === 'function' ||
261
+ (typeof instance.componentWillReceiveProps === 'function' &&
262
+ instance.componentWillReceiveProps.__suppressDeprecationWarning !==
263
+ true) ||
264
typeof instance.UNSAFE_componentWillReceiveProps === 'function'
265
) {
266
unsafeLifecycles.push('UNSAFE_componentWillReceiveProps');
267
}
268
if (
276
- typeof instance.componentWillUpdate === 'function' ||
269
+ (typeof instance.componentWillUpdate === 'function' &&
270
+ instance.componentWillUpdate.__suppressDeprecationWarning !== true) ||
271
typeof instance.UNSAFE_componentWillUpdate === 'function'
272
) {
273
unsafeLifecycles.push('UNSAFE_componentWillUpdate');
yarn.lock
+3
-3
@@ -4434,9 +4434,9 @@ react-dom@15.5.4:
4434
object-assign "^4.1.0"
4435
prop-types "~15.5.7"
4436
4437
-react-lifecycles-compat@^1.0.2:
4438
- version "1.0.2"
4439
- resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
4437
+react-lifecycles-compat@^3.0.2:
4438
+ version "3.0.2"
4439
+ resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
4440
4441
react@15.5.4:
4442
version "15.5.4"