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.

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

Warn about rendering Generators #13312

Merged
merged 4 commits into from
Aug 2, 2018
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
21 changes: 21 additions & 0 deletions packages/react-dom/src/__tests__/ReactMultiChild-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,27 @@ describe('ReactMultiChild', () => {
);
});

it('should warn for using generators as children', () => {
function* Foo() {
yield <h1 key="1">Hello</h1>;
yield <h1 key="2">World</h1>;
}

const div = document.createElement('div');
expect(() => {
ReactDOM.render(<Foo />, div);
}).toWarnDev(
'Using Generators as children is unsupported and will likely yield ' +
'unexpected results because enumerating a generator mutates it. You may ' +
'convert it to an array with `Array.from()` or the `[...spread]` operator ' +
'before rendering. Keep in mind you might need to polyfill these features for older browsers.\n' +
' in Foo (at **)',
);

// Test de-duplication
ReactDOM.render(<Foo />, div);
});

it('should reorder bailed-out children', () => {
class LetterInner extends React.Component {
render() {
Expand Down
19 changes: 19 additions & 0 deletions packages/react-reconciler/src/ReactChildFiber.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,15 @@ import {
import {StrictMode} from './ReactTypeOfMode';

let didWarnAboutMaps;
let didWarnAboutGenerators;
let didWarnAboutStringRefInStrictMode;
let ownerHasKeyUseWarning;
let ownerHasFunctionTypeWarning;
let warnForMissingKey = (child: mixed) => {};

if (__DEV__) {
didWarnAboutMaps = false;
didWarnAboutGenerators = false;
didWarnAboutStringRefInStrictMode = {};

/**
Expand Down Expand Up @@ -903,6 +905,23 @@ function ChildReconciler(shouldTrackSideEffects) {
);

if (__DEV__) {
// We don't support rendering Generators because it's a mutation.
// See https://github.com/facebook/react/issues/12995
if (
typeof Symbol === 'function' &&
newChildrenIterable[Symbol.toStringTag] === 'Generator'
) {
warning(
didWarnAboutGenerators,
'Using Generators as children is unsupported and will likely yield ' +
Copy link
Contributor

Choose a reason for hiding this comment

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

yield unexpected results

nice pun 😄

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

'unexpected results because enumerating a generator mutates it. ' +
'You may convert it to an array with `Array.from()` or the ' +
'`[...spread]` operator before rendering. Keep in mind ' +
'you might need to polyfill these features for older browsers.',
);
didWarnAboutGenerators = true;
}

// Warn about using Maps as children
if ((newChildrenIterable: any).entries === iteratorFn) {
warning(
Expand Down