Don’t error when returning an empty Fragment

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.

Author: philipp-spiess

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)};

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