Warn if class has a render() method but doesn't extend React.Component (

#11168) Warn if class has a render() method but doesn't extend React.Component
facebook · Oct 31, 2017 · 7f10fae · 7f10fae
1 parent 4a43cf6
commit 7f10fae
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
@@ -326,6 +326,26 @@ describe('ReactCompositeComponent', () => {
     expect(cbCalled).toBe(false);
   });
 
+  it('should warn when rendering a class with a render method that does not extend React.Component', () => {
+    spyOn(console, 'error');
+    var container = document.createElement('div');
+    class ClassWithRenderNotExtended {
+      render() {
+        return <div />;
+      }
+    }
+    expectDev(console.error.calls.count()).toBe(0);
+    expect(() => {
+      ReactDOM.render(<ClassWithRenderNotExtended />, container);
+    }).toThrow(TypeError);
+    expectDev(console.error.calls.count()).toBe(1);
+    expectDev(console.error.calls.argsFor(0)[0]).toContain(
+      'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
+        "but doesn't extend React.Component. This is likely to cause errors. " +
+        'Change ClassWithRenderNotExtended to extend React.Component instead.',
+    );
+  });
+
   it('should warn about `setState` in render', () => {
     spyOn(console, 'error');
 

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -39,6 +39,7 @@ var {
 } = require('shared/ReactTypeOfSideEffect');
 var {ReactCurrentOwner} = require('shared/ReactGlobalSharedState');
 var invariant = require('fbjs/lib/invariant');
+var getComponentName = require('shared/getComponentName');
 
 var ReactFiberClassComponent = require('./ReactFiberClassComponent');
 var {
@@ -471,6 +472,16 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(
     var value;
 
     if (__DEV__) {
+      if (fn.prototype && typeof fn.prototype.render === 'function') {
+        const componentName = getComponentName(workInProgress);
+        warning(
+          false,
+          "The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
+            'This is likely to cause errors. Change %s to extend React.Component instead.',
+          componentName,
+          componentName,
+        );
+      }
       ReactCurrentOwner.current = workInProgress;
       value = fn(props, context);
     } else {