Throw a better error when Lazy/Promise is used in React.Children (#28280

)

We could in theory actually support this case by throwing a Promise when
it's used inside a render. Allowing it to be synchronously unwrapped.
However, it's a bit sketchy because we officially only support this in
the render's child position or in `use()`.

Another alternative could be to actually pass the Promise/Lazy to the
callback so that you can reason about it and just return it again or
even unwrapping with `use()` - at least for the forEach case maybe.

packages/react/src/ReactChildren.js

@@ -13,6 +13,7 @@ import isArray from 'shared/isArray';
 import {
  getIteratorFn,
  REACT_ELEMENT_TYPE,
+ REACT_LAZY_TYPE,
  REACT_PORTAL_TYPE,
 } from 'shared/ReactSymbols';
 import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
@@ -103,6 +104,12 @@ function mapIntoArray(
  case REACT_ELEMENT_TYPE:
  case REACT_PORTAL_TYPE:
  invokeCallback = true;
+ break;
+ case REACT_LAZY_TYPE:
+ throw new Error(
+ 'Cannot render an Async Component, Promise or React.Lazy inside React.Children. ' +
+ 'We recommend not iterating over children and just rendering them plain.',
+ );
  }
  }
  }
@@ -207,6 +214,13 @@ function mapIntoArray(
  // eslint-disable-next-line react-internal/safe-string-coercion
  const childrenString = String((children: any));
 
+ if (typeof (children: any).then === 'function') {
+ throw new Error(
+ 'Cannot render an Async Component, Promise or React.Lazy inside React.Children. ' +
+ 'We recommend not iterating over children and just rendering them plain.',
+ );
+ }
+
  throw new Error(
  `Objects are not valid as a React child (found: ${
  childrenString === '[object Object]'

packages/react/src/__tests__/ReactChildren-test.js

@@ -948,6 +948,28 @@ describe('ReactChildren', () => {
  );
  });
 
+ it('should throw on React.lazy', async () => {
+ const lazyElement = React.lazy(async () => ({default: <div />}));
+ await expect(() => {
+ React.Children.forEach([lazyElement], () => {}, null);
+ }).toThrowError(
+ 'Cannot render an Async Component, Promise or React.Lazy inside React.Children. ' +
+ 'We recommend not iterating over children and just rendering them plain.',
+ {withoutStack: true}, // There's nothing on the stack
+ );
+ });
+
+ it('should throw on Promises', async () => {
+ const promise = Promise.resolve(<div />);
+ await expect(() => {
+ React.Children.forEach([promise], () => {}, null);
+ }).toThrowError(
+ 'Cannot render an Async Component, Promise or React.Lazy inside React.Children. ' +
+ 'We recommend not iterating over children and just rendering them plain.',
+ {withoutStack: true}, // There's nothing on the stack
+ );
+ });
+
  it('should throw on regex', () => {
  // Really, we care about dates (#4840) but those have nondeterministic
  // serialization (timezones) so let's test a regex instead:

scripts/error-codes/codes.json

@@ -489,5 +489,6 @@
  "501": "The render was aborted with postpone when the shell is incomplete. Reason: %s",
  "502": "Cannot read a Client Context from a Server Component.",
  "503": "Cannot use() an already resolved Client Reference.",
- "504": "Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client."
+ "504": "Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client.",
+ "505": "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain."
 }