From 4e78ff9c719d42b9d08e8f8f32b25eb015e0c329 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Sat, 2 Jun 2018 02:18:50 +0200
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20error=20when=20returning=20an?=
 =?UTF-8?q?=20empty=20Fragment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #12964

When a fragment is reconciled, we directly move onto it’s children.
Since an empty `<React.Fragment/>` will have children of `undefined`,
this would always throw.

To fix this, we bail out in those cases. This case now behaves like
returning `null` directly.
---
 .../react-dom/src/__tests__/ReactDOMFiber-test.js    | 12 ++++++++++++
 packages/react-reconciler/src/ReactChildFiber.js     |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index a93dda6ce11e8..d38ee7e68f61a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -171,6 +171,18 @@ describe('ReactDOMFiber', () => {
     expect(firstNode.tagName).toBe('DIV');
   });
 
+  it('renders an empty fragment', () => {
+    const EmptyFragment = () => <React.Fragment />;
+
+    let instance = null;
+    ReactDOM.render(<EmptyFragment />, container);
+
+    expect(container.childNodes.length).toBe(0);
+
+    const firstNode = ReactDOM.findDOMNode(instance);
+    expect(firstNode).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..f51e06128d897 100644
--- a/packages/react-reconciler/src/ReactChildFiber.js
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -1215,6 +1215,12 @@ function ChildReconciler(shouldTrackSideEffects) {
       newChild.key === null
     ) {
       newChild = newChild.props.children;
+
+      // In case of an empty fragment, this is undefined. Since we crash when
+      // undefined is reconciled, we replace this case with null.
+      if (typeof newChild === 'undefined') {
+        return deleteRemainingChildren(returnFiber, currentFirstChild);
+      }
     }
 
     // Handle object types