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

sw-yx · 2017-10-10T02:00:41Z

Hi! adding the fix for #10103. test/prettier/lint/flow all done and passing. (replaces PR #11149)

gaearon · 2017-10-10T11:32:41Z

Prettier is failing. Have you run yarn before running prettier?

sw-yx · 2017-10-10T14:18:32Z

gosh really embarrassing. Looks like i didnt commit the prettified file. I have resubmitted and it should pass. Jeez I am going to be so embarrassed when I look back on this in a few months

gaearon

See changes below + we'll need a test for this.

gaearon · 2017-10-10T15:18:40Z

src/renderers/shared/fiber/ReactFiberBeginWork.js

+      warning(
+        !(workInProgress.type.prototype &&
+          workInProgress.type.prototype.render),
+        'Warning: Using a class with a render method as a function, ' +


Please remove Warning: , it gets added automatically.

gaearon · 2017-10-10T15:18:40Z

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -481,6 +481,12 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
    var value;

    if (__DEV__) {
+      warning(
+        !(workInProgress.type.prototype &&


This is a bit hard to follow. Let's just wrap it in an if block with the real condition, and then pass false to the warning call.

gaearon · 2017-10-10T15:18:40Z

src/renderers/shared/fiber/ReactFiberBeginWork.js

+        !(workInProgress.type.prototype &&
+          workInProgress.type.prototype.render),
+        'Warning: Using a class with a render method as a function, ' +
+          'did you forget to extend React.Component?',


I would tweak the wording to:

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.

You’ll need to pass the component name (use getComponentName).

sw-yx · 2017-10-10T20:56:06Z

thanks @gaearon . its not clear to me -where- to add the tests. is there a deeper test guide somewhere other than the 4 page Contributing docs?

closest i can find is ReactIncrementalSideEffects-test.js where you do test warnings but this issue we are testing has no side effects
I could also put it in ReactIncremental-test.js but it is not obvious to me where the natural home is because of lack of similar tests. Not sure if you guys care about the order of tests!!
ReactIncrementalErrorHandling-test.js seems to be for true error handling.

sw-yx · 2017-10-10T22:32:23Z

added the test in ReactIncremental-test.js - no idea if this is the right place since i couldnt find similar tests to colocate this with but i figure i should just post it up for your comment in case it is acceptable!

gaearon · 2017-10-11T10:55:35Z

Sorry the structure is a bit confusing. We haven’t updated the file structure to be sensible yet after deleting the old engine.

But I’d put it here.

gaearon · 2017-10-11T10:56:14Z

Also the test is failing:

Expected spy to have been called with:

"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." as argument 1,

but it was called with

"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.".

Have you tried running it with npm test -- <filename>?

sw-yx · 2017-10-11T13:40:48Z

seems i errantly deleted a space when I made the warning multiline. will fix and move as suggested.

Yeah is there a separate issue for restructuring the test file structure? "ReactIncremental" doesnt really seem to make sense anymore

gaearon · 2017-10-28T17:45:08Z

Sorry for the trouble again. We rearranged how files are laid out in the repo. Could you please reapply your changes on top of master?

merging in fb's changes

sw-yx · 2017-10-29T01:36:26Z

I confess I'm not sure what's going on. I thought I could simply git pull your changes from master and git merge it into my branch, however when the checks run (as they have here) there are -hundreds- of test failures presumably because the files have been moved around. I'm not sure why the tests are not updated in my branch. I'm going to try junking my branch and simply re-creating the branch fresh from your master

sw-yx · 2017-10-29T02:48:18Z

ok this one looks like it works. Woohoo!

gaearon · 2017-10-31T11:51:46Z

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

+      try {
+        ReactDOM.render(<ClassWithRenderNotExtended />, container);
+      } catch (e) {
+        expect(e).toEqual(new TypeError('Cannot call a class as a function'));


This only runs assertions if we get into catch. But what if we have a bug that causes us not to throw an error? Then the test doesn't assert anything.

gaearon · 2017-10-31T12:02:14Z

I made a few minor tweaks:

Made sure the test fails if we don't throw.
Simplified the condition that we check.

I think this is good to go. Thanks!

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

facebook-github-bot added the CLA Signed label Oct 10, 2017

gaearon requested changes Oct 10, 2017

View changes

Merge pull request #1 from facebook/master

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits

59d9c06

merging in fb's changes

added forgotExtendClass warning on new master

Loading status checks…

854daa9

gaearon reviewed Oct 31, 2017

View changes

gaearon added 2 commits Oct 31, 2017

Tweak the test to assert in all cases

Loading status checks…

e8d3851

Simplify the condition

Loading status checks…

97e3a77

gaearon approved these changes Oct 31, 2017

View changes

gaearon changed the title ~~add classWithRenderNotExtended warning~~ Oct 31, 2017

gaearon merged commit 7f10fae into facebook:master Oct 31, 2017
1 check was pending

1 check was pending

ci/circleci Your tests are queued behind your running builds
Details

gaearon mentioned this pull request Oct 31, 2017

Improve error when you've forgotten to extend React.Component #10103

Closed

sw-yx deleted the sw-yx:forgotExtendWarning branch Oct 31, 2017

This was referenced Nov 13, 2017

Update react in / from 16.0.0 to 16.1.1 dropseed/jump#17

Merged

Update react-dom in / from 16.0.0 to 16.1.1 dropseed/jump#18

Merged

Ethan-Arrowood added a commit to Ethan-Arrowood/react that referenced this pull request Dec 8, 2017

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

ed86315

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

gaearon mentioned this pull request Jan 8, 2018

Warn in server renderer if class doesn't extend React.Component but has a render() method #11991

Closed

renovate bot mentioned this pull request Feb 22, 2018

Update react monorepo packages to v16.2.0 mozilla/ensemble#28

Closed

This was referenced Mar 1, 2018

Update react-dom in / from 16.0.0 to 16.2.0 pcardune/redux-firebase-mirror#27

Open

Update react-test-renderer in / from 16.0.0 to 16.2.0 pcardune/redux-firebase-mirror#28

Open

This was referenced Mar 21, 2018

Update react to 16.3.2-abandoned sbardian/DebtTrackerAPI#15

Closed

Update react-dom to ^16.0.0-abandoned sbardian/DebtTrackerAPI#18

Closed

Mar	APR	May
	11
2020	2021	2022

facebook / react

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 #11168

sw-yx commented Oct 10, 2017

gaearon commented Oct 10, 2017

sw-yx commented Oct 10, 2017

gaearon left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

sw-yx commented Oct 10, 2017 •

edited

sw-yx commented Oct 10, 2017 •

edited

gaearon commented Oct 11, 2017

gaearon commented Oct 11, 2017 •

edited

sw-yx commented Oct 11, 2017 •

edited

gaearon commented Oct 28, 2017

sw-yx commented Oct 29, 2017

sw-yx commented Oct 29, 2017

This comment has been minimized.

gaearon commented Oct 31, 2017

facebook / react

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 #11168

Conversation

sw-yx commented Oct 10, 2017

gaearon commented Oct 10, 2017

sw-yx commented Oct 10, 2017

gaearon left a comment

This comment has been minimized.

gaearon Oct 10, 2017 Member

This comment has been minimized.

gaearon Oct 10, 2017 Member

This comment has been minimized.

gaearon Oct 10, 2017 Member

sw-yx commented Oct 10, 2017 • edited

sw-yx commented Oct 10, 2017 • edited

gaearon commented Oct 11, 2017

gaearon commented Oct 11, 2017 • edited

sw-yx commented Oct 11, 2017 • edited

gaearon commented Oct 28, 2017

sw-yx commented Oct 29, 2017

sw-yx commented Oct 29, 2017

This comment has been minimized.

gaearon Oct 31, 2017 Member

gaearon commented Oct 31, 2017

gaearon Oct 10, 2017
Member

gaearon Oct 10, 2017
Member

gaearon Oct 10, 2017
Member

sw-yx commented Oct 10, 2017 •

edited

sw-yx commented Oct 10, 2017 •

edited

gaearon commented Oct 11, 2017 •

edited

sw-yx commented Oct 11, 2017 •

edited

gaearon Oct 31, 2017
Member