Warn when using one-shot iterators as children

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

@@ -323,6 +323,29 @@ describe('ReactMultiChild', () => {
     ReactDOM.render(<Foo />, div);
   });
 
+  it('should warn when using one-shot iterators as children', () => {
+    function Foo() {
+      const iterator = [<h1 key="1">Hello</h1>, <h1 key="2">Dave</h1>].values();
+
+      return iterator;
+    }
+
+    const div = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(<Foo />, div);
+    }).toErrorDev(
+      'Warning: Using an iterator such as `[].values()` as children is unsupported and will likely yield ' +
+        'unexpected results because enumerating such an iterator mutates it. ' +
+        'You may convert it to an array with `Array.from()` or the ' +
+        '`[...spread]` operator before rendering. Keep in mind that ' +
+        'you might need to polyfill these features for older browsers.\n' +
+        '    in Foo (at **)',
+    );
+
+    // Test de-duplication
+    ReactDOM.render(<Foo />, div);
+  });
+
   it('should not warn for using generators in legacy iterables', () => {
     const fooIterable = {
       '@@iterator': function*() {

packages/react-reconciler/src/ReactChildFiber.new.js

@@ -47,6 +47,7 @@ import {pushTreeFork} from './ReactFiberTreeContext.new';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
+let didWarnAboutOneShotIterators;
 let didWarnAboutStringRefs;
 let ownerHasKeyUseWarning;
 let ownerHasFunctionTypeWarning;
@@ -942,6 +943,22 @@ function ChildReconciler(shouldTrackSideEffects) {
           );
         }
         didWarnAboutGenerators = true;
+      } else {
+        // Warn about using one-shot iterators as children
+        const isOneShotIterator =
+          iteratorFn.call(newChildrenIterable) === newChildrenIterable;
+        if (isOneShotIterator) {
+          if (!didWarnAboutOneShotIterators) {
+            console.error(
+              'Using an iterator such as `[].values()` as children is unsupported and will likely yield ' +
+                'unexpected results because enumerating such an iterator mutates it. ' +
+                'You may convert it to an array with `Array.from()` or the ' +
+                '`[...spread]` operator before rendering. Keep in mind that ' +
+                'you might need to polyfill these features for older browsers.',
+            );
+          }
+          didWarnAboutOneShotIterators = true;
+        }
       }
 
       // Warn about using Maps as children

packages/react-reconciler/src/ReactChildFiber.old.js

@@ -47,6 +47,7 @@ import {pushTreeFork} from './ReactFiberTreeContext.old';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
+let didWarnAboutOneShotIterators;
 let didWarnAboutStringRefs;
 let ownerHasKeyUseWarning;
 let ownerHasFunctionTypeWarning;
@@ -942,6 +943,22 @@ function ChildReconciler(shouldTrackSideEffects) {
           );
         }
         didWarnAboutGenerators = true;
+      } else {
+        // Warn about using one-shot iterators as children
+        const isOneShotIterator =
+          iteratorFn.call(newChildrenIterable) === newChildrenIterable;
+        if (isOneShotIterator) {
+          if (!didWarnAboutOneShotIterators) {
+            console.error(
+              'Using an iterator such as `[].values()` as children is unsupported and will likely yield ' +
+                'unexpected results because enumerating such an iterator mutates it. ' +
+                'You may convert it to an array with `Array.from()` or the ' +
+                '`[...spread]` operator before rendering. Keep in mind that ' +
+                'you might need to polyfill these features for older browsers.',
+            );
+          }
+          didWarnAboutOneShotIterators = true;
+        }
       }
 
       // Warn about using Maps as children