[Flight] Refactor the Render Loop to Behave More Like Fizz

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js

@@ -242,6 +242,20 @@ describe('ReactFlightDOMEdge', () => {
     expect(result).toEqual(resolvedChildren);
   });
 
+  it('should execute repeated server components in a compact form', async () => {
+    async function ServerComponent({recurse}) {
+      if (recurse > 0) {
+        return <ServerComponent recurse={recurse - 1} />;
+      }
+      return <div>Fin</div>;
+    }
+    const stream = ReactServerDOMServer.renderToReadableStream(
+      <ServerComponent recurse={20} />,
+    );
+    const serializedContent = await readResult(stream);
+    expect(serializedContent.length).toBeLessThan(150);
+  });
+
   // @gate enableBinaryFlight
   it('should be able to serialize any kind of typed array', async () => {
     const buffer = new Uint8Array([

packages/react-server/src/ReactFizzServer.js

@@ -2201,8 +2201,12 @@ function renderNodeDestructive(
   task.node = node;
   task.childIndex = childIndex;
 
+  if (node === null) {
+    return;
+  }
+
   // Handle object types
-  if (typeof node === 'object' && node !== null) {
+  if (typeof node === 'object') {
     switch ((node: any).$$typeof) {
       case REACT_ELEMENT_TYPE: {
         const element: any = node;