Refactor ObjectDisplay and ObjectTable components for improved subscription handling

- Updated ObjectDisplay to subscribe to object updates based on the object ID, enhancing responsiveness to changes.
- Refactored ObjectTable to streamline subscription logic, ensuring real-time updates are managed more efficiently and reducing unnecessary re-renders.

src/components/Dashboard/common/ObjectDisplay.jsx

@@ -86,12 +86,18 @@ const ObjectDisplay = ({
     [fetchSpotlightData, isMinimalObject, objectType]
   )
 
-  // Subscribe to object updates when component mounts
+  const subscriptionObjectId = getStringId(object)
+
+  // Subscribe to object updates when the object ID changes
   useEffect(() => {
-    const id = getStringId(object)
+    if (
-    if (isValidId(id) && objectType && connected && token != null) {
+      isValidId(subscriptionObjectId) &&
+      objectType &&
+      connected &&
+      token != null
+    ) {
       const objectUpdatesUnsubscribe = subscribeToObjectUpdates(
-        id,
+        subscriptionObjectId,
         objectType,
         updateObjectEventHandler
       )
@@ -101,14 +107,13 @@ const ObjectDisplay = ({
       }
     }
   }, [
-    object,
+    subscriptionObjectId,
     objectType,
     subscribeToObjectUpdates,
     connected,
     token,
     updateObjectEventHandler,
-    isValidId,
+    isValidId
-    getStringId
   ])
 
   // Update local state when object prop changes

src/components/Dashboard/common/ObjectTable.jsx

@@ -183,6 +183,12 @@ const ObjectTable = forwardRef(
     const unsubscribesRef = useRef([])
     const updateEventHandlerRef = useRef()
     const subscribeToObjectTypeUpdatesRef = useRef(null)
+    const subscribedTypeRef = useRef(null)
+    const newEventHandlerRef = useRef()
+    const subscriptionFilterRef = useRef()
+    const subscribeToObjectTypeUpdatesFnRef = useRef(
+      subscribeToObjectTypeUpdates
+    )
     const prevValuesRef = useRef({ type, masterFilter })
 
     const rowActions =
@@ -611,6 +617,10 @@ const ObjectTable = forwardRef(
       return { ...active, ...masterFilter }
     }, [sidebarFilter, masterFilter])
 
+    newEventHandlerRef.current = newEventHandler
+    subscriptionFilterRef.current = subscriptionFilter
+    subscribeToObjectTypeUpdatesFnRef.current = subscribeToObjectTypeUpdates
+
     // Subscribe to real-time updates for all items
     useEffect(() => {
       if (pages.length > 0 && connected == true) {
@@ -682,28 +692,26 @@ const ObjectTable = forwardRef(
     }, [connected])
 
     useEffect(() => {
-      if (connected == true) {
+      if (connected !== true) return
-        const unsubscribe = subscribeToObjectTypeUpdates(
+      if (subscribedTypeRef.current === type) return
-          type,
-          subscriptionFilter,
-          newEventHandler
-        )
-        subscribeToObjectTypeUpdatesRef.current = unsubscribe
 
-        return () => {
+      const unsubscribe = subscribeToObjectTypeUpdatesFnRef.current(
-          if (unsubscribe) unsubscribe()
+        type,
-          if (subscribeToObjectTypeUpdatesRef.current === unsubscribe) {
+        subscriptionFilterRef.current,
-            subscribeToObjectTypeUpdatesRef.current = null
+        (params) => newEventHandlerRef.current(params)
-          }
+      )
+      subscribeToObjectTypeUpdatesRef.current = unsubscribe
+      subscribedTypeRef.current = type
+      return () => {
+        if (unsubscribe) unsubscribe()
+        if (subscribeToObjectTypeUpdatesRef.current === unsubscribe) {
+          subscribeToObjectTypeUpdatesRef.current = null
+        }
+        if (subscribedTypeRef.current === type) {
+          subscribedTypeRef.current = null
         }
       }
-    }, [
+    }, [type, connected])
-      type,
-      subscriptionFilter,
-      subscribeToObjectTypeUpdates,
-      connected,
-      newEventHandler
-    ])
 
     const updateData = useCallback(
       (id, updatedData) => {