Skip to content

Commit 690d2c8

Browse files
Reza Karim ZadehReza Karim Zadeh
authored andcommitted
docs: clarify iterable render returns
1 parent 383a1e9 commit 690d2c8

1 file changed

Lines changed: 3 additions & 1 deletion

File tree

src/content/reference/react/Component.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -573,14 +573,16 @@ You should write the `render` method as a pure function, meaning that it should
573573
574574
#### Returns {/*render-returns*/}
575575
576-
`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.
576+
`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`), arrays of React nodes, and iterables of React nodes.
577577
578578
#### Caveats {/*render-caveats*/}
579579
580580
- `render` should be written as a pure function of props, state, and context. It should not have side effects.
581581
582582
- `render` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
583583
584+
- If you return an iterator from `render`, make sure each render creates a fresh iterator. React may render more than once in development, and a reused iterator may already be consumed. When possible, prefer returning an array or another reusable iterable.
585+
584586
- When [Strict Mode](/reference/react/StrictMode) is on, React will call `render` twice in development and then throw away one of the results. This helps you notice the accidental side effects that need to be moved out of the `render` method.
585587
586588
- There is no one-to-one correspondence between the `render` call and the subsequent `componentDidMount` or `componentDidUpdate` call. Some of the `render` call results may be discarded by React when it's beneficial.

0 commit comments

Comments
 (0)