diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index a93dda6ce11e8..911f161b0e660 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -171,6 +171,31 @@ describe('ReactDOMFiber', () => {
expect(firstNode.tagName).toBe('DIV');
});
+ it('renders an empty fragment', () => {
+ const Div = () =>
;
+ const EmptyFragment = () => ;
+ const NonEmptyFragment = () => (
+
+
+
+ );
+
+ ReactDOM.render(, container);
+ expect(container.firstChild).toBe(null);
+
+ ReactDOM.render(, container);
+ expect(container.firstChild.tagName).toBe('DIV');
+
+ ReactDOM.render(, container);
+ expect(container.firstChild).toBe(null);
+
+ ReactDOM.render(, container);
+ expect(container.firstChild.tagName).toBe('DIV');
+
+ ReactDOM.render(, container);
+ expect(container.firstChild).toBe(null);
+ });
+
let svgEls, htmlEls, mathEls;
const expectSVG = {ref: el => svgEls.push(el)};
const expectHTML = {ref: el => htmlEls.push(el)};
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
index ae19577aa29c5..e3d1dd72ed995 100644
--- a/packages/react-reconciler/src/ReactChildFiber.js
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -1208,12 +1208,12 @@ function ChildReconciler(shouldTrackSideEffects) {
// 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.
- if (
+ const isUnkeyedTopLevelFragment =
typeof newChild === 'object' &&
newChild !== null &&
newChild.type === REACT_FRAGMENT_TYPE &&
- newChild.key === null
- ) {
+ newChild.key === null;
+ if (isUnkeyedTopLevelFragment) {
newChild = newChild.props.children;
}
@@ -1281,7 +1281,7 @@ function ChildReconciler(shouldTrackSideEffects) {
warnOnFunctionType();
}
}
- if (typeof newChild === 'undefined') {
+ if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
// If the new child is undefined, and the return fiber is a composite
// component, throw an error. If Fiber return types are disabled,
// we already threw above.