Add warning for componentDidReceiveProps() (#11479)
* Add warning for componentDidReceiveProps() * Adjust message for componentDidReceiveProps() warning
Tom committed
Nov 8, 2017 at 00:00 UTC
48012ef839bc13e35188b68d2db145869a6a05f5
2 files changed
+34
packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
+23
@@ -533,6 +533,29 @@ describe('ReactCompositeComponent', () => {
533
);
534
});
535
536
+ it('should warn when componentDidReceiveProps method is defined', () => {
537
+ spyOn(console, 'error');
538
+
539
+ class Component extends React.Component {
540
+ componentDidReceiveProps = () => {};
541
+
542
+ render() {
543
+ return <div />;
544
+ }
545
+ }
546
+
547
+ ReactTestUtils.renderIntoDocument(<Component />);
548
+
549
+ expectDev(console.error.calls.count()).toBe(1);
550
+ expectDev(console.error.calls.argsFor(0)[0]).toBe(
551
+ 'Warning: Component has a method called ' +
552
+ 'componentDidReceiveProps(). But there is no such lifecycle method. ' +
553
+ 'If you meant to update the state in response to changing props, ' +
554
+ 'use componentWillReceiveProps(). If you meant to fetch data or ' +
555
+ 'run side-effects or mutations after React has updated the UI, use componentDidUpdate().',
556
+ );
557
+ });
558
+
559
it('should warn when defaultProps was defined as an instance property', () => {
560
spyOn(console, 'error');
561
packages/react-reconciler/src/ReactFiberClassComponent.js
+11
@@ -281,6 +281,17 @@ export default function(
281
'Did you mean componentWillUnmount()?',
282
name,
283
);
284
+ const noComponentDidReceiveProps =
285
+ typeof instance.componentDidReceiveProps !== 'function';
286
+ warning(
287
+ noComponentDidReceiveProps,
288
+ '%s has a method called ' +
289
+ 'componentDidReceiveProps(). But there is no such lifecycle method. ' +
290
+ 'If you meant to update the state in response to changing props, ' +
291
+ 'use componentWillReceiveProps(). If you meant to fetch data or ' +
292
+ 'run side-effects or mutations after React has updated the UI, use componentDidUpdate().',
293
+ name,
294
+ );
295
const noComponentWillRecieveProps =
296
typeof instance.componentWillRecieveProps !== 'function';
297
warning(