Verifying that #28996 makes this change obsolete

facebook · May 6, 2024 · 718e73a · 718e73a
1 parent d1a82f8
commit 718e73a
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -2490,4 +2490,76 @@ describe('ReactFlight', () => {
 
     expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb</span>);
   });
+
+  // @gate __DEV__
+  it('does not emit duplicate chunks for already outlined elements in dev mode', async () => {
+    async function Bar({text}) {
+      return text.toUpperCase();
+    }
+
+    function Foo() {
+      const bar = <Bar text="bar" />;
+
+      return (
+        <div>
+          {bar}
+          {bar}
+        </div>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<Foo />);
+    const textDecoder = new TextDecoder();
+
+    await act(async () => {
+      const chunks = transport
+        .map(chunk => textDecoder.decode(chunk).replace(/\n$/, ''))
+        .join('\n');
+
+      expect(chunks).toEqual(
+        `
+1:{"name":"Foo","env":"Server","owner":null}
+0:D"$1"
+3:{"name":"Bar","env":"Server","owner":null}
+2:D"$3"
+0:["$","div",null,{"children":["$L2","$2"]},null]
+2:"BAR"
+`.trim(),
+      );
+    });
+  });
+
+  // @gate !__DEV__
+  it('does not emit duplicate chunks for already outlined elements in production mode', async () => {
+    async function Bar({text}) {
+      return text.toUpperCase();
+    }
+
+    function Foo() {
+      const bar = <Bar text="bar" />;
+
+      return (
+        <div>
+          {bar}
+          {bar}
+        </div>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<Foo />);
+    const textDecoder = new TextDecoder();
+
+    await act(async () => {
+      const chunks = transport
+        .map(chunk => textDecoder.decode(chunk).replace(/\n$/, ''))
+        .join('\n');
+
+      expect(chunks).toEqual(
+        `
+0:["$","div",null,{"children":["$L1","$0:props:children:0"]}]
+1:"BAR"
+`.trim(),
+      );
+    });
+  });
 });
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
@@ -1649,6 +1649,9 @@ function renderModel(
           task.implicitSlot,
           request.abortableTasks,
         );
+        // The suspended element was outlined, so we're using the same ID for the
+        // original value, thus ensuring that it's deduplicated if it's referenced again.
+        // request.writtenObjects.set((value: any), newTask.id);
         const ping = newTask.ping;
         (x: any).then(ping, ping);
         newTask.thenableState = getThenableStateAfterSuspending();