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

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 3 commits
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
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
23 changes: 23 additions & 0 deletions packages/react-dom/src/__tests__/ReactServerRendering-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,4 +554,27 @@ describe('ReactDOMServer', () => {
'The experimental Call and Return types are not currently supported by the server renderer.',
);
});

it('should warn when server rendering a class with a render method that does not extend React.Component', () => {
class ClassWithRenderNotExtended {
render() {
return <div />;
}
}

expect(() => {
expect(() =>
ReactDOMServer.renderToString(<ClassWithRenderNotExtended />),
).toWarnDev(
'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.',
);
}).toThrow(TypeError);

// Test deduplication
expect(() => {
ReactDOMServer.renderToString(<ClassWithRenderNotExtended />);
}).toThrow(TypeError);
});
});
20 changes: 20 additions & 0 deletions packages/react-dom/src/server/ReactPartialRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ let didWarnDefaultSelectValue = false;
let didWarnDefaultTextareaValue = false;
let didWarnInvalidOptionChildren = false;
const didWarnAboutNoopUpdateForComponent = {};
const didWarnAboutBadClass = {};
const valuePropNames = ['value', 'defaultValue'];
const newlineEatingTags = {
listing: true,
Expand Down Expand Up @@ -421,6 +422,25 @@ function resolve(
if (shouldConstruct(Component)) {
inst = new Component(element.props, publicContext, updater);
} else {
if (__DEV__) {
if (
Component.prototype &&
typeof Component.prototype.render === 'function'
) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

We should make sure we don't trigger this warning for the same component more than once.
If the client-side code doesn't deduplicate them, we also need to add deduplication there too.
Something like

const didWarnAboutBadClass = {};

// ...

if (!didWarnAboutBadClass[componentName]) {
  warning(...)
  didWarnAboutBadClass[componentName] = true
}

const componentName = getComponentName(Component);

if (componentName !== null && !didWarnAboutBadClass[componentName]) {
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;
}
}
}
inst = Component(element.props, publicContext, updater);
if (inst == null || inst.render == null) {
child = inst;
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