diff --git a/src/preserveArray.js b/src/preserveArray.js
index f78e783..97289d3 100644
--- a/src/preserveArray.js
+++ b/src/preserveArray.js
@@ -3,8 +3,10 @@ import { isObject } from './utils';
 const getLargerArray = (l, r) => l.length > r.length ? l : r;
 
 const preserve = (diff, left, right) => {
-
-  if (!isObject(diff)) return diff;
+  // Recursion stop conditions
+  // 1. The diff is not an object.
+  // 2. One of the side is undefined. Otherwise it causes errors
+  if (!isObject(diff) || left === undefined || right === undefined) return diff;
 
   return Object.keys(diff).reduce((acc, key) => {
 
diff --git a/src/preserveArray.test.js b/src/preserveArray.test.js
index b4b356d..ad5993c 100644
--- a/src/preserveArray.test.js
+++ b/src/preserveArray.test.js
@@ -2,7 +2,7 @@ import preserveArray from './preserveArray';
 
 describe('.preserveArray', () => {
   test('returns diff with nested objects converted back to arrays when property is deleted', () => {
-    const left = { a: [{ b: ['#', '#', '#', { hello: '' }] }, '#', { c: '', d: ['#', ''] }, '#'] };
+    const left = { a: [{ b: ['#', '#', '#', { hello: '' }, { hi: ''}] }, '#', { c: '', d: ['#', ''] }, '#'] };
     const right = { a: [{ b: ['#', '#', '#', { hello: 'world' }] }, '#', { c: 'hello', d: ['#', 'bob'] }] };
     const diff = {
       a: {
@@ -10,7 +10,8 @@ describe('.preserveArray', () => {
           b: {
             3: {
               hello: 'world'
-            }
+            },
+            4: undefined
           }
         },
         2: {
@@ -31,7 +32,8 @@ describe('.preserveArray', () => {
             'empty',
             {
               hello: 'world'
-            }
+            },
+            undefined
           ]
         },
         'empty',
@@ -42,6 +44,8 @@ describe('.preserveArray', () => {
         undefined
       ]
     };
+
+    // Remove 'empty'
     delete expected.a[0].b[0];
     delete expected.a[0].b[1];
     delete expected.a[0].b[2];
@@ -53,13 +57,16 @@ describe('.preserveArray', () => {
 
   test('returns diff with nested objects converted back to arrays when new property is added', () => {
     const left = { a: [{ b: ['#', '#', '#', { hello: '' }] }, '#', { c: '', d: ['#', ''] }] };
-    const right = { a: [{ b: ['#', '#', '#', { hello: 'world' }] }, '#', { c: 'hello', d: ['#', 'bob'] }, 'foobar'] };
+    const right = { a: [{ b: ['#', '#', '#', { hello: 'world' }, {hi: ''}] }, '#', { c: 'hello', d: ['#', 'bob'] }, 'foobar'] };
     const diff = {
       a: {
         0: {
           b: {
             3: {
               hello: 'world'
+            },
+            4: {
+              hi: ''
             }
           }
         },
@@ -81,6 +88,9 @@ describe('.preserveArray', () => {
             'empty',
             {
               hello: 'world'
+            },
+            {
+              hi: ''
             }
           ]
         },
@@ -92,6 +102,8 @@ describe('.preserveArray', () => {
         'foobar'
       ]
     };
+
+    // Remove 'empty'
     delete expected.a[0].b[0];
     delete expected.a[0].b[1];
     delete expected.a[0].b[2];