Test top level fragment inside lazy semantics

sebmarkbage · sebmarkbage · commit 7dabec53a843 · 2024-04-16T22:01:47.000-04:00
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
@@ -1460,15 +1460,18 @@ function createChildReconciler(
     lanes: Lanes,
     debugInfo: ReactDebugInfo | null,
   ): Fiber | null {
-    // This function is not recursive.
+    // This function is only recursive for Usables/Lazy and not nested arrays.
+    // That's so that using a Lazy wrapper is unobservable to the Fragment
+    // convention.
     // If the top level item is an array, we treat it as a set of children,
     // not as a fragment. Nested arrays on the other hand will be treated as
     // fragment nodes. Recursion happens at the normal flow.
 
     // Handle top level unkeyed fragments as if they were arrays.
     // This leads to an ambiguity between <>{[...]}</> and <>...</>.
     // We treat the ambiguous cases above the same.
-    // TODO: Let's use recursion like we do for Usable nodes?
+    // We don't use recursion here because a fragment inside a fragment
+    // is no longer considered "top level" for these purposes.
     const isUnkeyedTopLevelFragment =
       typeof newChild === 'object' &&
       newChild !== null &&
diff --git a/packages/react-reconciler/src/__tests__/ReactFragment-test.js b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
@@ -965,4 +965,51 @@ describe('ReactFragment', () => {
       </>,
     );
   });
+
+  it('should preserve state of children when adding a fragment wrapped in Lazy', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    const lazyChild = React.lazy(async () => ({
+      default: (
+        <>
+          <Stateful key="a" />
+          <div key="b">World</div>
+        </>
+      ),
+    }));
+
+    function Foo({condition}) {
+      return condition ? <Stateful key="a" /> : lazyChild;
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <div>World</div>
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
 });
