diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js index f805854841ffa..71c301134dd07 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js @@ -56,7 +56,7 @@ describe('ReactDOMFizzServer', () => { ); const result = await readResult(stream); expect(result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js index cd93ac5a5163c..464ee488d25cb 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js @@ -66,7 +66,7 @@ describe('ReactDOMFizzServer', () => { startWriting(); jest.runAllTimers(); expect(output.result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); @@ -84,7 +84,7 @@ describe('ReactDOMFizzServer', () => { // Then React starts writing. startWriting(); expect(output.result).toMatchInlineSnapshot( - `"test
hello world
"`, + `"test
hello world
"`, ); }); diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index 62d27c5e99174..53a4786f73cdf 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -563,7 +563,9 @@ function pushInnerHTML( 'for more information.', ); const html = innerHTML.__html; - target.push(stringToChunk(html)); + if (html !== null && html !== undefined) { + target.push(stringToChunk('' + html)); + } } } @@ -1079,6 +1081,12 @@ function pushStartGenericElement( target.push(endOfStartTag); pushInnerHTML(target, innerHTML, children); + if (typeof children === 'string') { + // Special case children as a string to avoid the unnecessary comment. + // TODO: Remove this special case after the general optimization is in place. + target.push(stringToChunk(encodeHTMLTextNode(children))); + return null; + } return children; } @@ -1205,10 +1213,13 @@ function pushStartPreformattedElement( 'for more information.', ); const html = innerHTML.__html; - if (typeof html === 'string' && html[0] === '\n') { - target.push(leadingNewline); + if (html !== null && html !== undefined) { + if (typeof html === 'string' && html.length > 0 && html[0] === '\n') { + target.push(leadingNewline, stringToChunk(html)); + } else { + target.push(stringToChunk('' + html)); + } } - target.push(stringToChunk(html)); } if (typeof children === 'string' && children[0] === '\n') { target.push(leadingNewline); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index a27a845f422e7..1a838be226c8b 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -767,7 +767,8 @@ function renderForwardRef( props: Object, ref: any, ): void { - renderWithHooks(request, task, type, props, ref); + const children = renderWithHooks(request, task, type.render, props, ref); + renderNodeDestructive(request, task, children); } function renderMemo(