Keep old reference in the state if they have not changed

webview/src/experiments/components/table/tableDataSlice.ts

@@ -1,5 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { TableData } from 'dvc/src/experiments/webview/contract'
+import { FilteredCounts } from 'dvc/src/experiments/model/filterBy/collect'
+import { SortDefinition } from 'dvc/src/experiments/model/sortBy'
+import { Column, Row, TableData } from 'dvc/src/experiments/webview/contract'
+import { keepEqualOldReferencesInArray } from '../../../util/array'
+import { keepReferenceIfEqual } from '../../../util/objects'
 
 export interface TableDataState extends TableData {
   hasData?: boolean
@@ -32,7 +36,27 @@ export const tableDataSlice = createSlice({
         return {
           ...state,
           ...action.payload,
-          hasData: true
+          columnWidths: keepReferenceIfEqual(
+            state.columnWidths,
+            action.payload.columnWidths
+          ) as Record<string, number>,
+          columns: keepEqualOldReferencesInArray(
+            state.columns,
+            action.payload.columns
+          ) as Column[],
+          filteredCounts: keepReferenceIfEqual(
+            state.filteredCounts,
+            action.payload.filteredCounts
+          ) as FilteredCounts,
+          hasData: true,
+          rows: keepEqualOldReferencesInArray(
+            state.rows,
+            action.payload.rows
+          ) as Row[],
+          sorts: keepEqualOldReferencesInArray(
+            state.sorts,
+            action.payload.sorts
+          ) as SortDefinition[]
         }
       }
       return tableDataInitialState

webview/src/util/array.ts

@@ -1,2 +1,11 @@
+import isEqual from 'lodash.isequal'
+import { BaseType } from './objects'
+
 export const pushIf = <T>(array: T[], condition: boolean, elements: T[]) =>
   condition && array.push(...elements)
+
+export const keepEqualOldReferencesInArray = (
+  oldArray: BaseType[],
+  newArray: BaseType[]
+) =>
+  newArray.map(item => oldArray.find(oldItem => isEqual(oldItem, item)) || item)

webview/src/util/objects.ts

@@ -1,3 +1,4 @@
+import isEqual from 'lodash.isequal'
 import { reorderObjectList } from 'dvc/src/util/array'
 
 export const performOrderedUpdate = (
@@ -22,6 +23,9 @@ export const performSimpleOrderedUpdate = (
   return [...newOrder]
 }
 
-type BaseType = string | number | boolean | Object | undefined | null
+export type BaseType = string | number | boolean | Object | undefined | null
 
 export type Any = BaseType | BaseType[]
+
+export const keepReferenceIfEqual = (old: BaseType, recent: BaseType) =>
+  isEqual(old, recent) ? old : recent