diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index af7688573b6cd..51730d7ff8ee3 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -533,6 +533,29 @@ describe('ReactCompositeComponent', () => { ); }); + it('should warn when componentDidReceiveProps method is defined', () => { + spyOn(console, 'error'); + + class Component extends React.Component { + componentDidReceiveProps = () => {}; + + render() { + return
; + } + } + + ReactTestUtils.renderIntoDocument(); + + expectDev(console.error.calls.count()).toBe(1); + expectDev(console.error.calls.argsFor(0)[0]).toBe( + 'Warning: Component has a method called ' + + 'componentDidReceiveProps(). But there is no such lifecycle method. ' + + 'If you meant to update the state in response to changing props, ' + + 'use componentWillReceiveProps(). If you meant to fetch data or ' + + 'run side-effects or mutations after React has updated the UI, use componentDidUpdate().', + ); + }); + it('should warn when defaultProps was defined as an instance property', () => { spyOn(console, 'error'); diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js index e93a2310b09e1..96449a77ff3cd 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.js @@ -281,6 +281,17 @@ export default function( 'Did you mean componentWillUnmount()?', name, ); + const noComponentDidReceiveProps = + typeof instance.componentDidReceiveProps !== 'function'; + warning( + noComponentDidReceiveProps, + '%s has a method called ' + + 'componentDidReceiveProps(). But there is no such lifecycle method. ' + + 'If you meant to update the state in response to changing props, ' + + 'use componentWillReceiveProps(). If you meant to fetch data or ' + + 'run side-effects or mutations after React has updated the UI, use componentDidUpdate().', + name, + ); const noComponentWillRecieveProps = typeof instance.componentWillRecieveProps !== 'function'; warning(