From f527fd18788dadf2223cfd5f339c761bc6f38b0c Mon Sep 17 00:00:00 2001
From: sebmarkbage <sebmarkbage@users.noreply.github.com>
Date: Tue, 12 Sep 2023 16:35:34 +0000
Subject: [PATCH] Track the key path difference between right before the first
 array (#27360)

There's a subtle difference if you suspend before the first array or
after. In Fiber, we don't deal with this because we just suspend the
parent and replay it if lazy() or Usable are used in its child slots. In
Fizz we try to optimize this a bit more and enable resuming inside the
component.

Semantically, it's different if you suspend/postpone before the first
child array or inside that child array. Because when you resume the
inner result might be another array and either that's part of the parent
path or part of the inner slot.

There might be more clever way of structuring this but I just use -1 to
indicate that we're not yet inside the array and is in the root child
position. If that renders an element, then that's just the same as the 0
slot.

We need to also encode this in the resuming. I called that resuming the
element or resuming the slot.

DiffTrain build for [7a3cb8f9cf43591afc74722ece9e3216ccc98128](https://github.com/facebook/react/commit/7a3cb8f9cf43591afc74722ece9e3216ccc98128)
---
 compiled/facebook-www/REVISION                |   2 +-
 .../ReactDOMServer-dev.classic.js             |  83 ++++--------
 .../facebook-www/ReactDOMServer-dev.modern.js |  81 ++++--------
 .../ReactDOMServer-prod.classic.js            | 123 ++++++++----------
 .../ReactDOMServer-prod.modern.js             | 121 ++++++++---------
 .../ReactDOMServerStreaming-dev.modern.js     |  79 ++++-------
 .../ReactDOMServerStreaming-prod.modern.js    | 119 ++++++++---------
 .../ReactTestRenderer-dev.modern.js           |   2 +-
 8 files changed, 236 insertions(+), 374 deletions(-)

diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index 7b042b3400ed6..c3dae265de707 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-bbc8530ed7a67859583a7c990ac51cd39c7746e5
+7a3cb8f9cf43591afc74722ece9e3216ccc98128
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
index 52c41ce6deeb1..8c5f9f7b652ff 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-51adb8d6";
+var ReactVersion = "18.3.0-www-classic-d167ae1b";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9990,7 +9990,7 @@ function renderSuspenseBoundary(request, task, props) {
 
   try {
     // We use the safe form because we don't handle suspending here. Only error handling.
-    renderNode(request, task, content, 0);
+    renderNode(request, task, content, -1);
     pushSegmentFinale(
       contentRootSegment.chunks,
       request.renderState,
@@ -10077,7 +10077,7 @@ function renderHostElement(request, task, type, props) {
   task.formatContext = getChildFormatContext(prevContext, type, props); // We use the non-destructive form because if something suspends, we still
   // need to pop back up and finish this subtree of HTML.
 
-  renderNode(request, task, children, 0); // We expect that errors will fatal the whole task and that we don't need
+  renderNode(request, task, children, -1); // We expect that errors will fatal the whole task and that we don't need
   // the correct context. Therefore this is not in a finally.
 
   task.formatContext = prevContext;
@@ -10139,13 +10139,13 @@ function finishClassComponent(request, task, instance, Component, props) {
         childContextTypes
       );
       task.legacyContext = mergedContext;
-      renderNodeDestructive(request, task, null, nextChildren, 0);
+      renderNodeDestructive(request, task, null, nextChildren, -1);
       task.legacyContext = previousContext;
       return;
     }
   }
 
-  renderNodeDestructive(request, task, null, nextChildren, 0);
+  renderNodeDestructive(request, task, null, nextChildren, -1);
 }
 
 function renderClassComponent(request, task, Component, props) {
@@ -10302,7 +10302,7 @@ function finishFunctionComponent(
     // suspends or errors, we'll use the non-destructive render path.
 
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
-    renderNode(request, task, children, 0); // Like the other contexts, this does not need to be in a finally block
+    renderNode(request, task, children, -1); // Like the other contexts, this does not need to be in a finally block
     // because renderNode takes care of unwinding the stack.
 
     task.treeContext = prevTreeContext;
@@ -10310,12 +10310,12 @@ function finishFunctionComponent(
     // If there were formState hooks, we must use the non-destructive path
     // because this component is not a pure indirection; we emitted markers
     // to the stream.
-    renderNode(request, task, children, 0);
+    renderNode(request, task, children, -1);
   } else {
     // We're now successfully past this task, and we haven't modified the
     // context stack. We don't have to pop back to the previous task every
     // again, so we can use the destructive recursive form.
-    renderNodeDestructive(request, task, null, children, 0);
+    renderNodeDestructive(request, task, null, children, -1);
   }
 }
 
@@ -10473,7 +10473,7 @@ function renderContextConsumer(request, task, context, props) {
 
   var newValue = readContext$1(context);
   var newChildren = render(newValue);
-  renderNodeDestructive(request, task, null, newChildren, 0);
+  renderNodeDestructive(request, task, null, newChildren, -1);
 }
 
 function renderContextProvider(request, task, type, props) {
@@ -10487,7 +10487,7 @@ function renderContextProvider(request, task, type, props) {
   }
 
   task.context = pushProvider(context, value);
-  renderNodeDestructive(request, task, null, children, 0);
+  renderNodeDestructive(request, task, null, children, -1);
   task.context = popProvider(context);
 
   {
@@ -10530,7 +10530,7 @@ function renderOffscreen(request, task, props) {
   else {
     // A visible Offscreen boundary is treated exactly like a fragment: a
     // pure indirection.
-    renderNodeDestructive(request, task, null, props.children, 0);
+    renderNodeDestructive(request, task, null, props.children, -1);
   }
 }
 
@@ -10571,7 +10571,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
     case REACT_FRAGMENT_TYPE: {
-      renderNodeDestructive(request, task, null, props.children, 0);
+      renderNodeDestructive(request, task, null, props.children, -1);
       return;
     }
 
@@ -10583,14 +10583,14 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, "SuspenseList"); // TODO: SuspenseList should control the boundaries.
 
-      renderNodeDestructive(request, task, null, props.children, 0);
+      renderNodeDestructive(request, task, null, props.children, -1);
       popComponentStackInDEV(task);
       return;
     }
 
     case REACT_SCOPE_TYPE: {
       {
-        renderNodeDestructive(request, task, null, props.children, 0);
+        renderNodeDestructive(request, task, null, props.children, -1);
         return;
       }
     }
@@ -10748,7 +10748,11 @@ function renderNodeDestructiveImpl(
         var ref = element.ref;
         var name = getComponentNameFromType(type);
         var prevKeyPath = task.keyPath;
-        task.keyPath = [task.keyPath, name, key == null ? childIndex : key];
+        task.keyPath = [
+          task.keyPath,
+          name,
+          key == null ? (childIndex === -1 ? 0 : childIndex) : key
+        ];
         renderElement(request, task, prevThenableState, type, props, ref);
         task.keyPath = prevKeyPath;
         return;
@@ -10910,52 +10914,18 @@ function renderNodeDestructiveImpl(
 }
 
 function renderChildrenArray(request, task, children, childIndex) {
+  var prevKeyPath = task.keyPath;
+
+  if (childIndex !== -1) {
+    task.keyPath = [task.keyPath, "", childIndex];
+  }
+
   var prevTreeContext = task.treeContext;
   var totalChildren = children.length;
 
   for (var i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // Nested arrays behave like a "fragment node" which is keyed.
-    // Therefore we need to add the current index as a parent key.
-    // We first check if the nested nodes are arrays or iterables.
-
-    if (isArray(node)) {
-      var prevKeyPath = task.keyPath;
-      task.keyPath = [task.keyPath, "", childIndex];
-      renderChildrenArray(request, task, node, i);
-      task.keyPath = prevKeyPath;
-      continue;
-    }
-
-    var iteratorFn = getIteratorFn(node);
-
-    if (iteratorFn) {
-      {
-        validateIterable(node, iteratorFn);
-      }
-
-      var iterator = iteratorFn.call(node);
-
-      if (iterator) {
-        var step = iterator.next();
-
-        if (!step.done) {
-          var _prevKeyPath = task.keyPath;
-          task.keyPath = [task.keyPath, "", childIndex];
-          var nestedChildren = [];
-
-          do {
-            nestedChildren.push(step.value);
-            step = iterator.next();
-          } while (!step.done);
-
-          renderChildrenArray(request, task, nestedChildren, i);
-          task.keyPath = _prevKeyPath;
-        }
-
-        continue;
-      }
-    } // We need to use the non-destructive form so that we can safely pop back
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // We need to use the non-destructive form so that we can safely pop back
     // up and render the sibling if something suspends.
 
     renderNode(request, task, node, i);
@@ -10963,6 +10933,7 @@ function renderChildrenArray(request, task, children, childIndex) {
   // only need to reset it to the previous value at the very end.
 
   task.treeContext = prevTreeContext;
+  task.keyPath = prevKeyPath;
 }
 
 function spawnNewSuspendedTask(request, task, thenableState, x) {
diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
index 681983cdbe44b..85e33f48a1c58 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-78c6f394";
+var ReactVersion = "18.3.0-www-modern-2efbee1a";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9749,7 +9749,7 @@ function renderSuspenseBoundary(request, task, props) {
 
   try {
     // We use the safe form because we don't handle suspending here. Only error handling.
-    renderNode(request, task, content, 0);
+    renderNode(request, task, content, -1);
     pushSegmentFinale(
       contentRootSegment.chunks,
       request.renderState,
@@ -9836,7 +9836,7 @@ function renderHostElement(request, task, type, props) {
   task.formatContext = getChildFormatContext(prevContext, type, props); // We use the non-destructive form because if something suspends, we still
   // need to pop back up and finish this subtree of HTML.
 
-  renderNode(request, task, children, 0); // We expect that errors will fatal the whole task and that we don't need
+  renderNode(request, task, children, -1); // We expect that errors will fatal the whole task and that we don't need
   // the correct context. Therefore this is not in a finally.
 
   task.formatContext = prevContext;
@@ -9886,7 +9886,7 @@ function finishClassComponent(request, task, instance, Component, props) {
     }
   }
 
-  renderNodeDestructive(request, task, null, nextChildren, 0);
+  renderNodeDestructive(request, task, null, nextChildren, -1);
 }
 
 function renderClassComponent(request, task, Component, props) {
@@ -10050,7 +10050,7 @@ function finishFunctionComponent(
     // suspends or errors, we'll use the non-destructive render path.
 
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
-    renderNode(request, task, children, 0); // Like the other contexts, this does not need to be in a finally block
+    renderNode(request, task, children, -1); // Like the other contexts, this does not need to be in a finally block
     // because renderNode takes care of unwinding the stack.
 
     task.treeContext = prevTreeContext;
@@ -10058,12 +10058,12 @@ function finishFunctionComponent(
     // If there were formState hooks, we must use the non-destructive path
     // because this component is not a pure indirection; we emitted markers
     // to the stream.
-    renderNode(request, task, children, 0);
+    renderNode(request, task, children, -1);
   } else {
     // We're now successfully past this task, and we haven't modified the
     // context stack. We don't have to pop back to the previous task every
     // again, so we can use the destructive recursive form.
-    renderNodeDestructive(request, task, null, children, 0);
+    renderNodeDestructive(request, task, null, children, -1);
   }
 }
 
@@ -10221,7 +10221,7 @@ function renderContextConsumer(request, task, context, props) {
 
   var newValue = readContext$1(context);
   var newChildren = render(newValue);
-  renderNodeDestructive(request, task, null, newChildren, 0);
+  renderNodeDestructive(request, task, null, newChildren, -1);
 }
 
 function renderContextProvider(request, task, type, props) {
@@ -10235,7 +10235,7 @@ function renderContextProvider(request, task, type, props) {
   }
 
   task.context = pushProvider(context, value);
-  renderNodeDestructive(request, task, null, children, 0);
+  renderNodeDestructive(request, task, null, children, -1);
   task.context = popProvider(context);
 
   {
@@ -10278,7 +10278,7 @@ function renderOffscreen(request, task, props) {
   else {
     // A visible Offscreen boundary is treated exactly like a fragment: a
     // pure indirection.
-    renderNodeDestructive(request, task, null, props.children, 0);
+    renderNodeDestructive(request, task, null, props.children, -1);
   }
 }
 
@@ -10319,7 +10319,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
     case REACT_FRAGMENT_TYPE: {
-      renderNodeDestructive(request, task, null, props.children, 0);
+      renderNodeDestructive(request, task, null, props.children, -1);
       return;
     }
 
@@ -10331,14 +10331,14 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, "SuspenseList"); // TODO: SuspenseList should control the boundaries.
 
-      renderNodeDestructive(request, task, null, props.children, 0);
+      renderNodeDestructive(request, task, null, props.children, -1);
       popComponentStackInDEV(task);
       return;
     }
 
     case REACT_SCOPE_TYPE: {
       {
-        renderNodeDestructive(request, task, null, props.children, 0);
+        renderNodeDestructive(request, task, null, props.children, -1);
         return;
       }
     }
@@ -10496,7 +10496,11 @@ function renderNodeDestructiveImpl(
         var ref = element.ref;
         var name = getComponentNameFromType(type);
         var prevKeyPath = task.keyPath;
-        task.keyPath = [task.keyPath, name, key == null ? childIndex : key];
+        task.keyPath = [
+          task.keyPath,
+          name,
+          key == null ? (childIndex === -1 ? 0 : childIndex) : key
+        ];
         renderElement(request, task, prevThenableState, type, props, ref);
         task.keyPath = prevKeyPath;
         return;
@@ -10658,52 +10662,18 @@ function renderNodeDestructiveImpl(
 }
 
 function renderChildrenArray(request, task, children, childIndex) {
+  var prevKeyPath = task.keyPath;
+
+  if (childIndex !== -1) {
+    task.keyPath = [task.keyPath, "", childIndex];
+  }
+
   var prevTreeContext = task.treeContext;
   var totalChildren = children.length;
 
   for (var i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // Nested arrays behave like a "fragment node" which is keyed.
-    // Therefore we need to add the current index as a parent key.
-    // We first check if the nested nodes are arrays or iterables.
-
-    if (isArray(node)) {
-      var prevKeyPath = task.keyPath;
-      task.keyPath = [task.keyPath, "", childIndex];
-      renderChildrenArray(request, task, node, i);
-      task.keyPath = prevKeyPath;
-      continue;
-    }
-
-    var iteratorFn = getIteratorFn(node);
-
-    if (iteratorFn) {
-      {
-        validateIterable(node, iteratorFn);
-      }
-
-      var iterator = iteratorFn.call(node);
-
-      if (iterator) {
-        var step = iterator.next();
-
-        if (!step.done) {
-          var _prevKeyPath = task.keyPath;
-          task.keyPath = [task.keyPath, "", childIndex];
-          var nestedChildren = [];
-
-          do {
-            nestedChildren.push(step.value);
-            step = iterator.next();
-          } while (!step.done);
-
-          renderChildrenArray(request, task, nestedChildren, i);
-          task.keyPath = _prevKeyPath;
-        }
-
-        continue;
-      }
-    } // We need to use the non-destructive form so that we can safely pop back
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // We need to use the non-destructive form so that we can safely pop back
     // up and render the sibling if something suspends.
 
     renderNode(request, task, node, i);
@@ -10711,6 +10681,7 @@ function renderChildrenArray(request, task, children, childIndex) {
   // only need to reset it to the previous value at the very end.
 
   task.treeContext = prevTreeContext;
+  task.keyPath = prevKeyPath;
 }
 
 function spawnNewSuspendedTask(request, task, thenableState, x) {
diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
index 57b065263e831..79181ec8bacab 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -2356,13 +2356,6 @@ var REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   ),
   REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"),
   MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-function getIteratorFn(maybeIterable) {
-  if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
-  maybeIterable =
-    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
-    maybeIterable["@@iterator"];
-  return "function" === typeof maybeIterable ? maybeIterable : null;
-}
 function getComponentNameFromType(type) {
   if (null == type) return null;
   if ("function" === typeof type) return type.displayName || type.name || null;
@@ -3036,11 +3029,11 @@ function finishFunctionComponent(
   hasId
     ? ((hasId = task.treeContext),
       (task.treeContext = pushTreeContext(hasId, 1, 0)),
-      renderNode(request, task, children, 0),
+      renderNode(request, task, children, -1),
       (task.treeContext = hasId))
     : didEmitFormStateMarkers
-    ? renderNode(request, task, children, 0)
-    : renderNodeDestructiveImpl(request, task, null, children, 0);
+    ? renderNode(request, task, children, -1)
+    : renderNodeDestructiveImpl(request, task, null, children, -1);
 }
 function resolveDefaultProps(Component, baseProps) {
   if (Component && Component.defaultProps) {
@@ -3162,9 +3155,9 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
           type = assign({}, prevThenableState, JSCompiler_inline_result);
         }
         task.legacyContext = type;
-        renderNodeDestructiveImpl(request, task, null, props, 0);
+        renderNodeDestructiveImpl(request, task, null, props, -1);
         task.legacyContext = prevThenableState;
-      } else renderNodeDestructiveImpl(request, task, null, props, 0);
+      } else renderNodeDestructiveImpl(request, task, null, props, -1);
     } else
       (contextKey = getMaskedContext(type, task.legacyContext)),
         (currentlyRenderingComponent = {}),
@@ -3206,7 +3199,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
       type,
       props
     );
-    renderNode(request, task, prevThenableState, 0);
+    renderNode(request, task, prevThenableState, -1);
     task.formatContext = JSCompiler_inline_result;
     a: {
       task = contextKey.chunks;
@@ -3253,17 +3246,17 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
       case REACT_STRICT_MODE_TYPE:
       case REACT_PROFILER_TYPE:
       case REACT_FRAGMENT_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_OFFSCREEN_TYPE:
         "hidden" !== props.mode &&
-          renderNodeDestructiveImpl(request, task, null, props.children, 0);
+          renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SUSPENSE_LIST_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SCOPE_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SUSPENSE_TYPE:
         a: {
@@ -3310,7 +3303,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
           request.renderState.boundaryResources = initialState.resources;
           try {
             if (
-              (renderNode(request, task, props, 0),
+              (renderNode(request, task, props, -1),
               request.renderState.generateStaticMarkup ||
                 (oldReplace.lastPushedText &&
                   oldReplace.textEmbedded &&
@@ -3392,7 +3385,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
             value: props
           };
           task.context = props;
-          renderNodeDestructiveImpl(request, task, null, contextKey, 0);
+          renderNodeDestructiveImpl(request, task, null, contextKey, -1);
           request = currentActiveSnapshot;
           if (null === request) throw Error(formatProdErrorMessage(403));
           props = request.parentValue;
@@ -3406,7 +3399,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
         case REACT_CONTEXT_TYPE:
           props = props.children;
           props = props(type._currentValue2);
-          renderNodeDestructiveImpl(request, task, null, props, 0);
+          renderNodeDestructiveImpl(request, task, null, props, -1);
           return;
         case REACT_LAZY_TYPE:
           contextKey = type._init;
@@ -3438,7 +3431,11 @@ function renderNodeDestructiveImpl(
         node = node.ref;
         var name = getComponentNameFromType(type),
           prevKeyPath = task.keyPath;
-        task.keyPath = [task.keyPath, name, null == key ? childIndex : key];
+        task.keyPath = [
+          task.keyPath,
+          name,
+          null == key ? (-1 === childIndex ? 0 : childIndex) : key
+        ];
         renderElement(request, task, prevThenableState, type, props, node);
         task.keyPath = prevKeyPath;
         return;
@@ -3454,17 +3451,26 @@ function renderNodeDestructiveImpl(
       renderChildrenArray(request, task, node, childIndex);
       return;
     }
-    if ((prevThenableState = getIteratorFn(node)))
-      if ((prevThenableState = prevThenableState.call(node))) {
-        node = prevThenableState.next();
-        if (!node.done) {
-          type = [];
-          do type.push(node.value), (node = prevThenableState.next());
-          while (!node.done);
-          renderChildrenArray(request, task, type, childIndex);
-        }
-        return;
+    null === node || "object" !== typeof node
+      ? (prevThenableState = null)
+      : ((prevThenableState =
+          (MAYBE_ITERATOR_SYMBOL && node[MAYBE_ITERATOR_SYMBOL]) ||
+          node["@@iterator"]),
+        (prevThenableState =
+          "function" === typeof prevThenableState ? prevThenableState : null));
+    if (
+      prevThenableState &&
+      (prevThenableState = prevThenableState.call(node))
+    ) {
+      node = prevThenableState.next();
+      if (!node.done) {
+        type = [];
+        do type.push(node.value), (node = prevThenableState.next());
+        while (!node.done);
+        renderChildrenArray(request, task, type, childIndex);
       }
+      return;
+    }
     if ("function" === typeof node.then)
       return renderNodeDestructiveImpl(
         request,
@@ -3512,39 +3518,16 @@ function renderNodeDestructiveImpl(
       )));
 }
 function renderChildrenArray(request, task, children, childIndex) {
-  for (
-    var prevTreeContext = task.treeContext,
-      totalChildren = children.length,
-      i = 0;
-    i < totalChildren;
-    i++
-  ) {
+  var prevKeyPath = task.keyPath;
+  -1 !== childIndex && (task.keyPath = [task.keyPath, "", childIndex]);
+  childIndex = task.treeContext;
+  for (var totalChildren = children.length, i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
-    if (isArrayImpl(node)) {
-      var prevKeyPath = task.keyPath;
-      task.keyPath = [task.keyPath, "", childIndex];
-      renderChildrenArray(request, task, node, i);
-      task.keyPath = prevKeyPath;
-    } else {
-      if ((prevKeyPath = getIteratorFn(node)))
-        if ((prevKeyPath = prevKeyPath.call(node))) {
-          node = prevKeyPath.next();
-          if (!node.done) {
-            var prevKeyPath$11 = task.keyPath;
-            task.keyPath = [task.keyPath, "", childIndex];
-            var nestedChildren = [];
-            do nestedChildren.push(node.value), (node = prevKeyPath.next());
-            while (!node.done);
-            renderChildrenArray(request, task, nestedChildren, i);
-            task.keyPath = prevKeyPath$11;
-          }
-          continue;
-        }
-      renderNode(request, task, node, i);
-    }
+    task.treeContext = pushTreeContext(childIndex, totalChildren, i);
+    renderNode(request, task, node, i);
   }
-  task.treeContext = prevTreeContext;
+  task.treeContext = childIndex;
+  task.keyPath = prevKeyPath;
 }
 function renderNode(request, task, node, childIndex) {
   var segment = task.blockedSegment,
@@ -4272,13 +4255,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$14 = partialBoundaries[i];
+      var boundary$13 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$14.resources;
-        var completedSegments = boundary$14.completedSegments;
+          boundary$13.resources;
+        var completedSegments = boundary$13.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -4288,7 +4271,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$14,
+              boundary$13,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -4300,7 +4283,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$14.resources,
+          boundary$13.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4363,8 +4346,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$16) {
-    logRecoverableError(request, error$16), fatalError(request, error$16);
+  } catch (error$15) {
+    logRecoverableError(request, error$15), fatalError(request, error$15);
   }
 }
 function onError() {}
@@ -4451,4 +4434,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-8c553ebd";
+exports.version = "18.3.0-www-classic-d6f252d2";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
index 83f404b829d16..913b87376e7d1 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -2356,13 +2356,6 @@ var REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   ),
   REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"),
   MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-function getIteratorFn(maybeIterable) {
-  if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
-  maybeIterable =
-    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
-    maybeIterable["@@iterator"];
-  return "function" === typeof maybeIterable ? maybeIterable : null;
-}
 function getComponentNameFromType(type) {
   if (null == type) return null;
   if ("function" === typeof type) return type.displayName || type.name || null;
@@ -3028,11 +3021,11 @@ function finishFunctionComponent(
   hasId
     ? ((hasId = task.treeContext),
       (task.treeContext = pushTreeContext(hasId, 1, 0)),
-      renderNode(request, task, children, 0),
+      renderNode(request, task, children, -1),
       (task.treeContext = hasId))
     : didEmitFormStateMarkers
-    ? renderNode(request, task, children, 0)
-    : renderNodeDestructiveImpl(request, task, null, children, 0);
+    ? renderNode(request, task, children, -1)
+    : renderNodeDestructiveImpl(request, task, null, children, -1);
 }
 function resolveDefaultProps(Component, baseProps) {
   if (Component && Component.defaultProps) {
@@ -3142,7 +3135,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
           }
         else prevThenableState.queue = null;
       props = JSCompiler_inline_result.render();
-      renderNodeDestructiveImpl(request, task, null, props, 0);
+      renderNodeDestructiveImpl(request, task, null, props, -1);
     } else
       (currentlyRenderingComponent = {}),
         (currentlyRenderingTask = task),
@@ -3174,7 +3167,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     JSCompiler_inline_result.lastPushedText = !1;
     prevThenableState = task.formatContext;
     task.formatContext = getChildFormatContext(prevThenableState, type, props);
-    renderNode(request, task, ref, 0);
+    renderNode(request, task, ref, -1);
     task.formatContext = prevThenableState;
     a: {
       task = JSCompiler_inline_result.chunks;
@@ -3221,17 +3214,17 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
       case REACT_STRICT_MODE_TYPE:
       case REACT_PROFILER_TYPE:
       case REACT_FRAGMENT_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_OFFSCREEN_TYPE:
         "hidden" !== props.mode &&
-          renderNodeDestructiveImpl(request, task, null, props.children, 0);
+          renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SUSPENSE_LIST_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SCOPE_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SUSPENSE_TYPE:
         a: {
@@ -3278,7 +3271,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
           request.renderState.boundaryResources = partial.resources;
           try {
             if (
-              (renderNode(request, task, props, 0),
+              (renderNode(request, task, props, -1),
               request.renderState.generateStaticMarkup ||
                 (contentRootSegment.lastPushedText &&
                   contentRootSegment.textEmbedded &&
@@ -3365,7 +3358,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
             task,
             null,
             JSCompiler_inline_result,
-            0
+            -1
           );
           request = currentActiveSnapshot;
           if (null === request) throw Error(formatProdErrorMessage(403));
@@ -3380,7 +3373,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
         case REACT_CONTEXT_TYPE:
           props = props.children;
           props = props(type._currentValue2);
-          renderNodeDestructiveImpl(request, task, null, props, 0);
+          renderNodeDestructiveImpl(request, task, null, props, -1);
           return;
         case REACT_LAZY_TYPE:
           JSCompiler_inline_result = type._init;
@@ -3412,7 +3405,11 @@ function renderNodeDestructiveImpl(
         node = node.ref;
         var name = getComponentNameFromType(type),
           prevKeyPath = task.keyPath;
-        task.keyPath = [task.keyPath, name, null == key ? childIndex : key];
+        task.keyPath = [
+          task.keyPath,
+          name,
+          null == key ? (-1 === childIndex ? 0 : childIndex) : key
+        ];
         renderElement(request, task, prevThenableState, type, props, node);
         task.keyPath = prevKeyPath;
         return;
@@ -3428,17 +3425,26 @@ function renderNodeDestructiveImpl(
       renderChildrenArray(request, task, node, childIndex);
       return;
     }
-    if ((prevThenableState = getIteratorFn(node)))
-      if ((prevThenableState = prevThenableState.call(node))) {
-        node = prevThenableState.next();
-        if (!node.done) {
-          type = [];
-          do type.push(node.value), (node = prevThenableState.next());
-          while (!node.done);
-          renderChildrenArray(request, task, type, childIndex);
-        }
-        return;
+    null === node || "object" !== typeof node
+      ? (prevThenableState = null)
+      : ((prevThenableState =
+          (MAYBE_ITERATOR_SYMBOL && node[MAYBE_ITERATOR_SYMBOL]) ||
+          node["@@iterator"]),
+        (prevThenableState =
+          "function" === typeof prevThenableState ? prevThenableState : null));
+    if (
+      prevThenableState &&
+      (prevThenableState = prevThenableState.call(node))
+    ) {
+      node = prevThenableState.next();
+      if (!node.done) {
+        type = [];
+        do type.push(node.value), (node = prevThenableState.next());
+        while (!node.done);
+        renderChildrenArray(request, task, type, childIndex);
       }
+      return;
+    }
     if ("function" === typeof node.then)
       return renderNodeDestructiveImpl(
         request,
@@ -3486,39 +3492,16 @@ function renderNodeDestructiveImpl(
       )));
 }
 function renderChildrenArray(request, task, children, childIndex) {
-  for (
-    var prevTreeContext = task.treeContext,
-      totalChildren = children.length,
-      i = 0;
-    i < totalChildren;
-    i++
-  ) {
+  var prevKeyPath = task.keyPath;
+  -1 !== childIndex && (task.keyPath = [task.keyPath, "", childIndex]);
+  childIndex = task.treeContext;
+  for (var totalChildren = children.length, i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
-    if (isArrayImpl(node)) {
-      var prevKeyPath = task.keyPath;
-      task.keyPath = [task.keyPath, "", childIndex];
-      renderChildrenArray(request, task, node, i);
-      task.keyPath = prevKeyPath;
-    } else {
-      if ((prevKeyPath = getIteratorFn(node)))
-        if ((prevKeyPath = prevKeyPath.call(node))) {
-          node = prevKeyPath.next();
-          if (!node.done) {
-            var prevKeyPath$11 = task.keyPath;
-            task.keyPath = [task.keyPath, "", childIndex];
-            var nestedChildren = [];
-            do nestedChildren.push(node.value), (node = prevKeyPath.next());
-            while (!node.done);
-            renderChildrenArray(request, task, nestedChildren, i);
-            task.keyPath = prevKeyPath$11;
-          }
-          continue;
-        }
-      renderNode(request, task, node, i);
-    }
+    task.treeContext = pushTreeContext(childIndex, totalChildren, i);
+    renderNode(request, task, node, i);
   }
-  task.treeContext = prevTreeContext;
+  task.treeContext = childIndex;
+  task.keyPath = prevKeyPath;
 }
 function renderNode(request, task, node, childIndex) {
   var segment = task.blockedSegment,
@@ -4246,13 +4229,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$14 = partialBoundaries[i];
+      var boundary$13 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$14.resources;
-        var completedSegments = boundary$14.completedSegments;
+          boundary$13.resources;
+        var completedSegments = boundary$13.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -4262,7 +4245,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$14,
+              boundary$13,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -4274,7 +4257,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$14.resources,
+          boundary$13.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4337,8 +4320,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$16) {
-    logRecoverableError(request, error$16), fatalError(request, error$16);
+  } catch (error$15) {
+    logRecoverableError(request, error$15), fatalError(request, error$15);
   }
 }
 function onError() {}
@@ -4425,4 +4408,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-aeba0586";
+exports.version = "18.3.0-www-modern-a9d281fb";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
index 20e3aa67fb4b7..cb1f3ae42613c 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -9652,7 +9652,7 @@ function renderSuspenseBoundary(request, task, props) {
 
   try {
     // We use the safe form because we don't handle suspending here. Only error handling.
-    renderNode(request, task, content, 0);
+    renderNode(request, task, content, -1);
     pushSegmentFinale(
       contentRootSegment.chunks,
       request.renderState,
@@ -9739,7 +9739,7 @@ function renderHostElement(request, task, type, props) {
   task.formatContext = getChildFormatContext(prevContext, type, props); // We use the non-destructive form because if something suspends, we still
   // need to pop back up and finish this subtree of HTML.
 
-  renderNode(request, task, children, 0); // We expect that errors will fatal the whole task and that we don't need
+  renderNode(request, task, children, -1); // We expect that errors will fatal the whole task and that we don't need
   // the correct context. Therefore this is not in a finally.
 
   task.formatContext = prevContext;
@@ -9789,7 +9789,7 @@ function finishClassComponent(request, task, instance, Component, props) {
     }
   }
 
-  renderNodeDestructive(request, task, null, nextChildren, 0);
+  renderNodeDestructive(request, task, null, nextChildren, -1);
 }
 
 function renderClassComponent(request, task, Component, props) {
@@ -9953,7 +9953,7 @@ function finishFunctionComponent(
     // suspends or errors, we'll use the non-destructive render path.
 
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
-    renderNode(request, task, children, 0); // Like the other contexts, this does not need to be in a finally block
+    renderNode(request, task, children, -1); // Like the other contexts, this does not need to be in a finally block
     // because renderNode takes care of unwinding the stack.
 
     task.treeContext = prevTreeContext;
@@ -9961,12 +9961,12 @@ function finishFunctionComponent(
     // If there were formState hooks, we must use the non-destructive path
     // because this component is not a pure indirection; we emitted markers
     // to the stream.
-    renderNode(request, task, children, 0);
+    renderNode(request, task, children, -1);
   } else {
     // We're now successfully past this task, and we haven't modified the
     // context stack. We don't have to pop back to the previous task every
     // again, so we can use the destructive recursive form.
-    renderNodeDestructive(request, task, null, children, 0);
+    renderNodeDestructive(request, task, null, children, -1);
   }
 }
 
@@ -10124,7 +10124,7 @@ function renderContextConsumer(request, task, context, props) {
 
   var newValue = readContext$1(context);
   var newChildren = render(newValue);
-  renderNodeDestructive(request, task, null, newChildren, 0);
+  renderNodeDestructive(request, task, null, newChildren, -1);
 }
 
 function renderContextProvider(request, task, type, props) {
@@ -10138,7 +10138,7 @@ function renderContextProvider(request, task, type, props) {
   }
 
   task.context = pushProvider(context, value);
-  renderNodeDestructive(request, task, null, children, 0);
+  renderNodeDestructive(request, task, null, children, -1);
   task.context = popProvider(context);
 
   {
@@ -10181,7 +10181,7 @@ function renderOffscreen(request, task, props) {
   else {
     // A visible Offscreen boundary is treated exactly like a fragment: a
     // pure indirection.
-    renderNodeDestructive(request, task, null, props.children, 0);
+    renderNodeDestructive(request, task, null, props.children, -1);
   }
 }
 
@@ -10222,7 +10222,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
     case REACT_FRAGMENT_TYPE: {
-      renderNodeDestructive(request, task, null, props.children, 0);
+      renderNodeDestructive(request, task, null, props.children, -1);
       return;
     }
 
@@ -10234,14 +10234,14 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, "SuspenseList"); // TODO: SuspenseList should control the boundaries.
 
-      renderNodeDestructive(request, task, null, props.children, 0);
+      renderNodeDestructive(request, task, null, props.children, -1);
       popComponentStackInDEV(task);
       return;
     }
 
     case REACT_SCOPE_TYPE: {
       {
-        renderNodeDestructive(request, task, null, props.children, 0);
+        renderNodeDestructive(request, task, null, props.children, -1);
         return;
       }
     }
@@ -10399,7 +10399,11 @@ function renderNodeDestructiveImpl(
         var ref = element.ref;
         var name = getComponentNameFromType(type);
         var prevKeyPath = task.keyPath;
-        task.keyPath = [task.keyPath, name, key == null ? childIndex : key];
+        task.keyPath = [
+          task.keyPath,
+          name,
+          key == null ? (childIndex === -1 ? 0 : childIndex) : key
+        ];
         renderElement(request, task, prevThenableState, type, props, ref);
         task.keyPath = prevKeyPath;
         return;
@@ -10561,52 +10565,18 @@ function renderNodeDestructiveImpl(
 }
 
 function renderChildrenArray(request, task, children, childIndex) {
+  var prevKeyPath = task.keyPath;
+
+  if (childIndex !== -1) {
+    task.keyPath = [task.keyPath, "", childIndex];
+  }
+
   var prevTreeContext = task.treeContext;
   var totalChildren = children.length;
 
   for (var i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // Nested arrays behave like a "fragment node" which is keyed.
-    // Therefore we need to add the current index as a parent key.
-    // We first check if the nested nodes are arrays or iterables.
-
-    if (isArray(node)) {
-      var prevKeyPath = task.keyPath;
-      task.keyPath = [task.keyPath, "", childIndex];
-      renderChildrenArray(request, task, node, i);
-      task.keyPath = prevKeyPath;
-      continue;
-    }
-
-    var iteratorFn = getIteratorFn(node);
-
-    if (iteratorFn) {
-      {
-        validateIterable(node, iteratorFn);
-      }
-
-      var iterator = iteratorFn.call(node);
-
-      if (iterator) {
-        var step = iterator.next();
-
-        if (!step.done) {
-          var _prevKeyPath = task.keyPath;
-          task.keyPath = [task.keyPath, "", childIndex];
-          var nestedChildren = [];
-
-          do {
-            nestedChildren.push(step.value);
-            step = iterator.next();
-          } while (!step.done);
-
-          renderChildrenArray(request, task, nestedChildren, i);
-          task.keyPath = _prevKeyPath;
-        }
-
-        continue;
-      }
-    } // We need to use the non-destructive form so that we can safely pop back
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // We need to use the non-destructive form so that we can safely pop back
     // up and render the sibling if something suspends.
 
     renderNode(request, task, node, i);
@@ -10614,6 +10584,7 @@ function renderChildrenArray(request, task, children, childIndex) {
   // only need to reset it to the previous value at the very end.
 
   task.treeContext = prevTreeContext;
+  task.keyPath = prevKeyPath;
 }
 
 function spawnNewSuspendedTask(request, task, thenableState, x) {
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
index f4c323a977df6..494905c1d21f6 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
@@ -2187,13 +2187,6 @@ var REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   ),
   REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"),
   MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-function getIteratorFn(maybeIterable) {
-  if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
-  maybeIterable =
-    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
-    maybeIterable["@@iterator"];
-  return "function" === typeof maybeIterable ? maybeIterable : null;
-}
 function getComponentNameFromType(type) {
   if (null == type) return null;
   if ("function" === typeof type) return type.displayName || type.name || null;
@@ -2825,11 +2818,11 @@ function finishFunctionComponent(
   hasId
     ? ((hasId = task.treeContext),
       (task.treeContext = pushTreeContext(hasId, 1, 0)),
-      renderNode(request, task, children, 0),
+      renderNode(request, task, children, -1),
       (task.treeContext = hasId))
     : didEmitFormStateMarkers
-    ? renderNode(request, task, children, 0)
-    : renderNodeDestructiveImpl(request, task, null, children, 0);
+    ? renderNode(request, task, children, -1)
+    : renderNodeDestructiveImpl(request, task, null, children, -1);
 }
 function resolveDefaultProps(Component, baseProps) {
   if (Component && Component.defaultProps) {
@@ -2939,7 +2932,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
           }
         else prevThenableState.queue = null;
       props = JSCompiler_inline_result.render();
-      renderNodeDestructiveImpl(request, task, null, props, 0);
+      renderNodeDestructiveImpl(request, task, null, props, -1);
     } else
       (currentlyRenderingComponent = {}),
         (currentlyRenderingTask = task),
@@ -2971,7 +2964,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
     JSCompiler_inline_result.lastPushedText = !1;
     prevThenableState = task.formatContext;
     task.formatContext = getChildFormatContext(prevThenableState, type, props);
-    renderNode(request, task, ref, 0);
+    renderNode(request, task, ref, -1);
     task.formatContext = prevThenableState;
     a: {
       task = JSCompiler_inline_result.chunks;
@@ -3018,17 +3011,17 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
       case REACT_STRICT_MODE_TYPE:
       case REACT_PROFILER_TYPE:
       case REACT_FRAGMENT_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_OFFSCREEN_TYPE:
         "hidden" !== props.mode &&
-          renderNodeDestructiveImpl(request, task, null, props.children, 0);
+          renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SUSPENSE_LIST_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SCOPE_TYPE:
-        renderNodeDestructiveImpl(request, task, null, props.children, 0);
+        renderNodeDestructiveImpl(request, task, null, props.children, -1);
         return;
       case REACT_SUSPENSE_TYPE:
         a: {
@@ -3075,7 +3068,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
           request.renderState.boundaryResources = partial.resources;
           try {
             if (
-              (renderNode(request, task, props, 0),
+              (renderNode(request, task, props, -1),
               contentRootSegment.lastPushedText &&
                 contentRootSegment.textEmbedded &&
                 contentRootSegment.chunks.push("\x3c!-- --\x3e"),
@@ -3161,7 +3154,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
             task,
             null,
             JSCompiler_inline_result,
-            0
+            -1
           );
           request = currentActiveSnapshot;
           if (null === request)
@@ -3179,7 +3172,7 @@ function renderElement(request, task, prevThenableState, type, props, ref) {
         case REACT_CONTEXT_TYPE:
           props = props.children;
           props = props(type._currentValue);
-          renderNodeDestructiveImpl(request, task, null, props, 0);
+          renderNodeDestructiveImpl(request, task, null, props, -1);
           return;
         case REACT_LAZY_TYPE:
           JSCompiler_inline_result = type._init;
@@ -3212,7 +3205,11 @@ function renderNodeDestructiveImpl(
         node = node.ref;
         var name = getComponentNameFromType(type),
           prevKeyPath = task.keyPath;
-        task.keyPath = [task.keyPath, name, null == key ? childIndex : key];
+        task.keyPath = [
+          task.keyPath,
+          name,
+          null == key ? (-1 === childIndex ? 0 : childIndex) : key
+        ];
         renderElement(request, task, prevThenableState, type, props, node);
         task.keyPath = prevKeyPath;
         return;
@@ -3230,17 +3227,26 @@ function renderNodeDestructiveImpl(
       renderChildrenArray(request, task, node, childIndex);
       return;
     }
-    if ((prevThenableState = getIteratorFn(node)))
-      if ((prevThenableState = prevThenableState.call(node))) {
-        node = prevThenableState.next();
-        if (!node.done) {
-          type = [];
-          do type.push(node.value), (node = prevThenableState.next());
-          while (!node.done);
-          renderChildrenArray(request, task, type, childIndex);
-        }
-        return;
+    null === node || "object" !== typeof node
+      ? (prevThenableState = null)
+      : ((prevThenableState =
+          (MAYBE_ITERATOR_SYMBOL && node[MAYBE_ITERATOR_SYMBOL]) ||
+          node["@@iterator"]),
+        (prevThenableState =
+          "function" === typeof prevThenableState ? prevThenableState : null));
+    if (
+      prevThenableState &&
+      (prevThenableState = prevThenableState.call(node))
+    ) {
+      node = prevThenableState.next();
+      if (!node.done) {
+        type = [];
+        do type.push(node.value), (node = prevThenableState.next());
+        while (!node.done);
+        renderChildrenArray(request, task, type, childIndex);
       }
+      return;
+    }
     if ("function" === typeof node.then)
       return renderNodeDestructiveImpl(
         request,
@@ -3287,39 +3293,16 @@ function renderNodeDestructiveImpl(
       )));
 }
 function renderChildrenArray(request, task, children, childIndex) {
-  for (
-    var prevTreeContext = task.treeContext,
-      totalChildren = children.length,
-      i = 0;
-    i < totalChildren;
-    i++
-  ) {
+  var prevKeyPath = task.keyPath;
+  -1 !== childIndex && (task.keyPath = [task.keyPath, "", childIndex]);
+  childIndex = task.treeContext;
+  for (var totalChildren = children.length, i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
-    if (isArrayImpl(node)) {
-      var prevKeyPath = task.keyPath;
-      task.keyPath = [task.keyPath, "", childIndex];
-      renderChildrenArray(request, task, node, i);
-      task.keyPath = prevKeyPath;
-    } else {
-      if ((prevKeyPath = getIteratorFn(node)))
-        if ((prevKeyPath = prevKeyPath.call(node))) {
-          node = prevKeyPath.next();
-          if (!node.done) {
-            var prevKeyPath$11 = task.keyPath;
-            task.keyPath = [task.keyPath, "", childIndex];
-            var nestedChildren = [];
-            do nestedChildren.push(node.value), (node = prevKeyPath.next());
-            while (!node.done);
-            renderChildrenArray(request, task, nestedChildren, i);
-            task.keyPath = prevKeyPath$11;
-          }
-          continue;
-        }
-      renderNode(request, task, node, i);
-    }
+    task.treeContext = pushTreeContext(childIndex, totalChildren, i);
+    renderNode(request, task, node, i);
   }
-  task.treeContext = prevTreeContext;
+  task.treeContext = childIndex;
+  task.keyPath = prevKeyPath;
 }
 function renderNode(request, task, node, childIndex) {
   var segment = task.blockedSegment,
@@ -3946,13 +3929,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$14 = partialBoundaries[i];
+      var boundary$13 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$14.resources;
-        var completedSegments = boundary$14.completedSegments;
+          boundary$13.resources;
+        var completedSegments = boundary$13.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -3962,7 +3945,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$14,
+              boundary$13,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -3974,7 +3957,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$14.resources,
+          boundary$13.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4034,8 +4017,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$16) {
-    logRecoverableError(request, error$16), fatalError(request, error$16);
+  } catch (error$15) {
+    logRecoverableError(request, error$15), fatalError(request, error$15);
   }
 }
 exports.abortStream = function (stream) {
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
index 8d6d030d8e951..80fbe0aef63da 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -24356,7 +24356,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-8702abe1";
+var ReactVersion = "18.3.0-www-modern-fa0eb004";
 
 // Might add PROFILE later.