Skip to content
Open
Changes from all commits
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
8 changes: 7 additions & 1 deletion src/content/reference/react/Component.md
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,13 @@ You should write the `render` method as a pure function, meaning that it should

#### Returns {/*render-returns*/}

`render` can return any valid React node. This includes React elements such as `<div />`, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes.
`render` can return any valid React node. This includes React elements such as `<div />`, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. You can also return [iterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol), such as those produced by generators.

<Pitfall>

If you return an iterable from `render`, make sure it is an iterable and not an iterator. Iterators are single-use and will only work in production builds. In development, React calls `render` twice, which would exhaust the iterator on the second call. To avoid this, return an iterable object (for example, an object with a `[Symbol.iterator]()` method that creates a fresh iterator each time), or use [`Fragment`](/reference/react/Fragment) instead.

</Pitfall>

#### Caveats {/*render-caveats*/}

Expand Down
Loading