Improve useLiveify a bit

client/src/components/liveify.ts

@@ -1,7 +1,7 @@
 import { LiveEvent } from "@refinedev/core";
 import liveProvider from "./liveProvider";
 import { getAPIURL } from "../utils/url";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 
 const liveProviderInstance = liveProvider(getAPIURL());
 
@@ -16,7 +16,6 @@ export function useLiveify<Data extends { id: number }>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   transformPayload: (payload: any) => Data
 ) {
-  // TODO: The hooks in this function is quite janky, and should be refactored to be more efficient
   // New state that holds the dataSource with updated values from the live provider
   const [updatedDataSource, setUpdatedDataSource] = useState<Data[]>(dataSource);
 
@@ -25,20 +24,15 @@ export function useLiveify<Data extends { id: number }>(
     setUpdatedDataSource(dataSource);
   }, [dataSource]);
 
-  // Create a constant reference to itemIds. This is to prevent the useEffect below from triggering extra times.
-  const itemIds = dataSource.map((item) => item.id);
-  const [prevItemIds, setPrevItemIds] = useState<number[]>(itemIds);
-  if (JSON.stringify(itemIds) !== JSON.stringify(prevItemIds)) {
-    setPrevItemIds(itemIds);
-  }
-
   // Subscribe to changes for all items in the dataSource
   useEffect(() => {
+    const itemIds = dataSource.map((item) => item.id);
+
     const subscription = liveProviderInstance?.subscribe({
       channel: `${resource}-list`,
       params: {
         resource: resource,
-        ids: prevItemIds,
+        ids: itemIds,
         subscriptionType: "useList",
       },
       types: ["update"],
@@ -57,7 +51,7 @@ export function useLiveify<Data extends { id: number }>(
         liveProviderInstance?.unsubscribe(subscription);
       }
     };
-  }, [resource, prevItemIds, transformPayload]);
+  }, [resource, dataSource, transformPayload]);
 
   return updatedDataSource;
 }