diff --git a/src/components/table/RowDataLoader.js b/src/components/table/RowDataLoader.js
index d5fe5251..abea4814 100644
--- a/src/components/table/RowDataLoader.js
+++ b/src/components/table/RowDataLoader.js
@@ -60,11 +60,13 @@ class RowDataLoader {
       // Remove rows outside the range
       // Leave the current range in case all old items can be reused
       // (avoids flickering because there is no need to re-render)
-      for (let i = 0; i < this._data.length; i++) {
-        if (!items[i]) {
-          delete this._data[i];
+      this._data = produce(this._data, (draft) => {
+        for (let i = 0; i < draft.length; i++) {
+          if (!items[i]) {
+            draft.splice(i, 1);
+          }
         }
-      }
+      });
 
       // Update rows
       const updatedCount = items.reduce(this.updateItem.bind(this), 0);
@@ -140,7 +142,7 @@ class RowDataLoader {
         console.error('Failed to load data', error);
         for (let i = rowBase; i < endRow; i++) {
           if (this._pendingRequest[i]) {
-            delete this._pendingRequest[i];
+            this.removePendingRequests(rowIndex);
           }
         }
       });
@@ -155,7 +157,9 @@ class RowDataLoader {
     for (let i = 0; i < rows.length; i++) {
       const rowIndex = start + i;
       if (!isEqual(this._data[rowIndex], rows[i])) {
-        this._data[rowIndex] = rows[i];
+        this._data = produce(this._data, (draft) => {
+          draft[rowIndex] = rows[i];
+        });
 
         if (this._pendingRequest[rowIndex]) {
           this._pendingRequest[rowIndex].forEach((f) => f(rows[i]));
@@ -164,7 +168,7 @@ class RowDataLoader {
         console.log('onRowsReceived, row data equals', rowIndex);
       }
 
-      delete this._pendingRequest[rowIndex];
+      this.removePendingRequests(rowIndex);
     }
   }
 }