[Fiber] Avoid duplicate debug info for array children (#35733)

Author: eps1lon

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2820,7 +2820,8 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
-expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+constfragment=thirdPartyChildren[2];
+expect(getDebugInfo(fragment)).toEqual(
 __DEV__
  ? [
 {time: gate(flags=>flags.enableAsyncDebugInfo) ? 54 : 22},
@@ -2835,6 +2836,9 @@ describe('ReactFlight', () => {
 ]
  : undefined,
 );
+expect(getDebugInfo(fragment.props.children[0])).toEqual(
+__DEV__ ? null : undefined,
+);
 ReactNoop.render(result);
 });
 
@@ -2847,6 +2851,61 @@ describe('ReactFlight', () => {
 );
 });
 
+it('preserves debug info for keyed Fragment',async()=>{
+functionApp(){
+returnReactServer.createElement(
+ReactServer.Fragment,
+{key: 'app'},
+ReactServer.createElement('h1',null,'App'),
+ReactServer.createElement('div',null,'Child'),
+);
+}
+
+consttransport=ReactNoopFlightServer.render(
+ReactServer.createElement(
+ReactServer.Fragment,
+null,
+ReactServer.createElement('link',{key: 'styles'}),
+ReactServer.createElement(App,null),
+),
+);
+
+awaitact(async()=>{
+constroot=awaitReactNoopFlightClient.read(transport);
+
+constfragment=root[1];
+expect(getDebugInfo(fragment)).toEqual(
+__DEV__
+ ? [
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+]
+ : undefined,
+);
+// Making sure debug info doesn't get added multiple times on Fragment children
+expect(getDebugInfo(fragment[0])).toEqual(__DEV__ ? null : undefined);
+constfragmentChild=fragment[0].props.children[0];
+expect(getDebugInfo(fragmentChild)).toEqual(__DEV__ ? null : undefined);
+
+ReactNoop.render(root);
+});
+
+expect(ReactNoop).toMatchRenderedOutput(
+<>
+<link/>
+<h1>App</h1>
+<div>Child</div>
+</>,
+);
+});
+
 // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
 it('preserves debug info for server-to-server pass through of async iterables',async()=>{
 letresolve;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -2827,6 +2827,40 @@ describe('Store', () => {
  `);
 });
 
+// @reactVersion >= 19.0
+it('does not duplicate Server Component parents in keyed Fragments',async()=>{
+// TODO: Use an actual Flight renderer.
+// See ReactFlight-test for the produced JSX from Flight.
+functionClientComponent(){
+returnnull;
+}
+// This used to be a keyed Fragment on the Server.
+constchildren=[<ClientComponentkey="app"/>];
+children._debugInfo=[
+{time: 12},
+{
+name: 'App',
+env: 'Server',
+key: null,
+stack: ' in Object.<anonymous> (at **)',
+props: {},
+},
+{time: 13},
+];
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitactAsync(()=>{
+root.render([children]);
+});
+
+expect(store).toMatchInlineSnapshot(`
+ [root]
+ ▾ <App> [Server]
+ <ClientComponent key="app">
+ `);
+});
+
 // @reactVersion >= 17.0
 it('can reconcile Suspense in fallback positions',async()=>{
 letresolveFallback;

packages/react-reconciler/src/ReactChildFiber.js

@@ -789,6 +789,7 @@ function createChildReconciler(
 // We treat the parent as the owner for stack purposes.
 created._debugOwner=returnFiber;
 created._debugTask=returnFiber._debugTask;
+// Make sure to not push again when handling the Fragment child.
 constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
 created._debugInfo=currentDebugInfo;
 currentDebugInfo=prevDebugInfo;
@@ -1915,41 +1916,41 @@ function createChildReconciler(
 }
 
 if(isArray(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenArray(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(getIteratorFn(newChild)){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }
 
 if(
 enableAsyncIterableChildren&&
 typeofnewChild[ASYNC_ITERATOR]==='function'
 ){
-constprevDebugInfo=pushDebugInfo(newChild._debugInfo);
+// We created a Fragment for this child with the debug info.
+// No need to push again.
 constfirstChild=reconcileChildrenAsyncIteratable(
 returnFiber,
 currentFirstChild,
 newChild,
 lanes,
 );
-currentDebugInfo=prevDebugInfo;
 returnfirstChild;
 }