diff --git a/src/diff/children.js b/src/diff/children.js
index 63b61e045a..42cd334828 100644
--- a/src/diff/children.js
+++ b/src/diff/children.js
@@ -239,6 +239,7 @@ function constructNewChildrenArray(
 			remainingOldChildren
 		));
 
+		oldVNode = NULL;
 		if (matchingIndex != -1) {
 			oldVNode = oldChildren[matchingIndex];
 			remainingOldChildren--;
diff --git a/test/browser/keys.test.jsx b/test/browser/keys.test.jsx
index 3550352242..9702781d51 100644
--- a/test/browser/keys.test.jsx
+++ b/test/browser/keys.test.jsx
@@ -179,9 +179,11 @@ describe('keys', () => {
 			render({ children, busy }) {
 				return (
 					<div class={busy ? 'busy' : ''}>
-						{children && children.length
-							? children
-							: <div class="busy-placeholder" />}
+						{children && children.length ? (
+							children
+						) : (
+							<div class="busy-placeholder" />
+						)}
 						<div class="indicator">
 							<div>indicator</div>
 							<div>indicator</div>
@@ -566,19 +568,21 @@ describe('keys', () => {
 		let Stateful2MovedRef;
 
 		function Foo({ moved }) {
-			return moved
-				? <div>
-						<div>1</div>
-						<Stateful1 key="c" ref={c => (Stateful1MovedRef = c)} />
-						<div>2</div>
-						<Stateful2 key="d" ref={c => (Stateful2MovedRef = c)} />
-					</div>
-				: <div>
-						<div>1</div>
-						<Stateful1 key="a" ref={c => (Stateful1Ref = c)} />
-						<div>2</div>
-						<Stateful2 key="b" ref={c => (Stateful2Ref = c)} />
-					</div>;
+			return moved ? (
+				<div>
+					<div>1</div>
+					<Stateful1 key="c" ref={c => (Stateful1MovedRef = c)} />
+					<div>2</div>
+					<Stateful2 key="d" ref={c => (Stateful2MovedRef = c)} />
+				</div>
+			) : (
+				<div>
+					<div>1</div>
+					<Stateful1 key="a" ref={c => (Stateful1Ref = c)} />
+					<div>2</div>
+					<Stateful2 key="b" ref={c => (Stateful2Ref = c)} />
+				</div>
+			);
 		}
 
 		const expectedHtml = div([
@@ -635,31 +639,27 @@ describe('keys', () => {
 		let Stateful2MovedRef;
 
 		function Foo({ moved }) {
-			return moved
-				? <div>
-						<div>1</div>
-						<Stateful2
-							key="b"
-							ref={c => (c ? (Stateful2MovedRef = c) : undefined)}
-						/>
-						<div>2</div>
-						<Stateful1
-							key="a"
-							ref={c => (c ? (Stateful1MovedRef = c) : undefined)}
-						/>
-					</div>
-				: <div>
-						<div>1</div>
-						<Stateful1
-							key="a"
-							ref={c => (c ? (Stateful1Ref = c) : undefined)}
-						/>
-						<div>2</div>
-						<Stateful2
-							key="b"
-							ref={c => (c ? (Stateful2Ref = c) : undefined)}
-						/>
-					</div>;
+			return moved ? (
+				<div>
+					<div>1</div>
+					<Stateful2
+						key="b"
+						ref={c => (c ? (Stateful2MovedRef = c) : undefined)}
+					/>
+					<div>2</div>
+					<Stateful1
+						key="a"
+						ref={c => (c ? (Stateful1MovedRef = c) : undefined)}
+					/>
+				</div>
+			) : (
+				<div>
+					<div>1</div>
+					<Stateful1 key="a" ref={c => (c ? (Stateful1Ref = c) : undefined)} />
+					<div>2</div>
+					<Stateful2 key="b" ref={c => (c ? (Stateful2Ref = c) : undefined)} />
+				</div>
+			);
 		}
 
 		const htmlForFalse = div([
@@ -841,19 +841,21 @@ describe('keys', () => {
 		let Stateful2MovedRef;
 
 		function Foo({ unkeyed }) {
-			return unkeyed
-				? <div>
-						<div>1</div>
-						<Stateful1 ref={c => (Stateful2MovedRef = c)} />
-						<div>2</div>
-						<Stateful2 ref={c => (Stateful1MovedRef = c)} />
-					</div>
-				: <div>
-						<div>1</div>
-						<Stateful1 key="a" ref={c => (Stateful1Ref = c)} />
-						<div>2</div>
-						<Stateful2 key="b" ref={c => (Stateful2Ref = c)} />
-					</div>;
+			return unkeyed ? (
+				<div>
+					<div>1</div>
+					<Stateful1 ref={c => (Stateful2MovedRef = c)} />
+					<div>2</div>
+					<Stateful2 ref={c => (Stateful1MovedRef = c)} />
+				</div>
+			) : (
+				<div>
+					<div>1</div>
+					<Stateful1 key="a" ref={c => (Stateful1Ref = c)} />
+					<div>2</div>
+					<Stateful2 key="b" ref={c => (Stateful2Ref = c)} />
+				</div>
+			);
 		}
 
 		const expectedHtml = div([
@@ -1007,18 +1009,20 @@ describe('keys', () => {
 		}
 
 		const App = props => {
-			return props.y === '2'
-				? <div>
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						<Comp key={3} i={3} />
-					</div>
-				: <div>
-						{null}
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						<Comp key={3} i={3} />
-					</div>;
+			return props.y === '2' ? (
+				<div>
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					<Comp key={3} i={3} />
+				</div>
+			) : (
+				<div>
+					{null}
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					<Comp key={3} i={3} />
+				</div>
+			);
 		};
 
 		render(<App y="1" />, scratch);
@@ -1040,17 +1044,19 @@ describe('keys', () => {
 		}
 
 		const App = props => {
-			return props.y === '1'
-				? <div>
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						<Comp key={3} i={3} />
-					</div>
-				: <div>
-						<Comp key={1} i={1} />
-						{null}
-						<Comp key={3} i={3} />
-					</div>;
+			return props.y === '1' ? (
+				<div>
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					<Comp key={3} i={3} />
+				</div>
+			) : (
+				<div>
+					<Comp key={1} i={1} />
+					{null}
+					<Comp key={3} i={3} />
+				</div>
+			);
 		};
 
 		render(<App y="1" />, scratch);
@@ -1080,18 +1086,20 @@ describe('keys', () => {
 		}
 
 		const App = props => {
-			return props.y === '2'
-				? <div>
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						<Comp key={3} i={3} />
-					</div>
-				: <div>
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						{null}
-						<Comp key={3} i={3} />
-					</div>;
+			return props.y === '2' ? (
+				<div>
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					<Comp key={3} i={3} />
+				</div>
+			) : (
+				<div>
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					{null}
+					<Comp key={3} i={3} />
+				</div>
+			);
 		};
 
 		render(<App y="1" />, scratch);
@@ -1113,18 +1121,20 @@ describe('keys', () => {
 		}
 
 		const App = props => {
-			return props.y === '2'
-				? <div>
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						<Comp key={3} i={3} />
-					</div>
-				: <div>
-						<Comp key={1} i={1} />
-						<Comp key={2} i={2} />
-						<Comp key={3} i={3} />
-						{null}
-					</div>;
+			return props.y === '2' ? (
+				<div>
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					<Comp key={3} i={3} />
+				</div>
+			) : (
+				<div>
+					<Comp key={1} i={1} />
+					<Comp key={2} i={2} />
+					<Comp key={3} i={3} />
+					{null}
+				</div>
+			);
 		};
 
 		render(<App y="1" />, scratch);
@@ -1133,4 +1143,27 @@ describe('keys', () => {
 		render(<App y="2" />, scratch);
 		expect(actions).to.deep.equal(['mounted 1', 'mounted 2', 'mounted 3']);
 	});
+
+	// Issue #4973: Test growing list diff
+	it('should correctly diff a growing list of keyed children', () => {
+		let values = [0, 1, 2, 3, 4];
+
+		render(<List values={values} />, scratch);
+		expect(scratch.textContent).to.equal('01234');
+
+		values = [2, 3, 4, 5, 6];
+		clearLog();
+
+		render(<List values={values} />, scratch);
+		expect(scratch.textContent).to.equal('23456');
+
+		expect(getLog()).to.deep.equal([
+			'<li>0.remove()',
+			'<li>1.remove()',
+			'<li>.appendChild(#text)',
+			'<ol>234.appendChild(<li>5)',
+			'<li>.appendChild(#text)',
+			'<ol>2345.appendChild(<li>6)'
+		]);
+	});
 });