From a3137483c6278970e6c3f561d05a8ba59872ea90 Mon Sep 17 00:00:00 2001
From: Ricardo Sawir <37329575+sawirricardo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:52:48 +0700
Subject: [PATCH] docs: document that Component.render can return iterables

Closes #286

Add a note in the Component.render reference docs that render() can
return iterables (e.g. from generators). Include a Pitfall warning
that iterators (single-use) only work in production builds since
React calls render twice in development, and recommend using iterables
or Fragment instead.
---
 src/content/reference/react/Component.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 3b882f09762..d5b6ede53cc 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -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*/}