fix and add test for 4283

src/diff/children.js

@@ -252,6 +252,7 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) {
 				// assume DOM nodes in this subtree are mounted and usable.
 				oldChildren[i] = null;
 				remainingOldChildren--;
+				skew++;
 			}
 			continue;
 		}

test/browser/render.test.js

@@ -1356,4 +1356,57 @@ describe('render()', () => {
 		rerender();
 		expect(scratch.innerHTML).to.equal('<div><div></div><div>B</div></div>');
 	});
+
+	it('should not crash or repeatedly add the same child when replacing a matched vnode with null (mixed dom-types)', () => {
+		const B = () => <div>B</div>;
+
+		let update;
+		class App extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { show: true };
+				update = () => {
+					this.setState(state => ({ show: !state.show }));
+				};
+			}
+
+			render() {
+				if (this.state.show) {
+					return (
+						<div>
+							<B />
+							<div />
+						</div>
+					);
+				}
+				return (
+					<div>
+						<span />
+						{null}
+						<B />
+						<div />
+					</div>
+				);
+			}
+		}
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.equal('<div><div>B</div><div></div></div>');
+
+		update();
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<div><span></span><div>B</div><div></div></div>'
+		);
+
+		update();
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div><div>B</div><div></div></div>');
+
+		update();
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<div><span></span><div>B</div><div></div></div>'
+		);
+	});
 });