Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add warning in server renderer if class doesn't extend React.Component #11993

Merged
merged 4 commits into from
Jan 9, 2018
Merged

Add warning in server renderer if class doesn't extend React.Component #11993

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6499aba
Add warning in server renderer if class doesn't extend React.Component
wyze Jan 8, 2018
0ed0dae
Use `.toWarnDev` matcher and deduplicate warnings
wyze Jan 8, 2018
2aaabea
Deduplicate client-side warning if class doesn't extend React.Component
wyze Jan 9, 2018
5a06117
Default componentName to Unknown if null
wyze Jan 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,11 @@ describe('ReactCompositeComponent', () => {
'Change ClassWithRenderNotExtended to extend React.Component instead.',
);
}).toThrow(TypeError);

// Test deduplication
expect(() => {
ReactDOM.render(<ClassWithRenderNotExtended />, container);
}).toThrow(TypeError);
});

it('should warn about `setState` in render', () => {
Expand Down
20 changes: 13 additions & 7 deletions packages/react-reconciler/src/ReactFiberBeginWork.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,11 @@ import {
import {NoWork, Never} from './ReactFiberExpirationTime';

let warnedAboutStatelessRefs;
let didWarnAboutBadClass;

if (__DEV__) {
warnedAboutStatelessRefs = {};
didWarnAboutBadClass = {};
}

export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
Expand Down Expand Up @@ -459,13 +461,17 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
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,
);

if (componentName !== null && !didWarnAboutBadClass[componentName]) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's null we still want to show the message. Let's just say getComponentName(workInProgress) || 'Unknown'

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added that to make Flow happy, but your solution is better. I should do the same default on the server side warning too, correct?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, thanks!

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,
);
didWarnAboutBadClass[componentName] = true;
}
}
ReactCurrentOwner.current = workInProgress;
value = fn(props, context);
Expand Down