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;
 }

client/src/pages/vendors/list.tsx

@@ -18,7 +18,7 @@ import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useNavigate } from "react-router-dom";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 dayjs.extend(utc);
 
@@ -78,11 +78,14 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list
-    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
-    [tableProps.dataSource]
-  const queryDataSource: IVendor[] = useMemo(
+  const queryDataSource: IVendor[] = useMemo(() => {
+    return (tableProps.dataSource || []).map((record) => ({ ...record }));
+  }, [tableProps.dataSource]);
+  const dataSource = useLiveify(
+    "vendor",
+    queryDataSource,
+    useCallback((record: IVendor) => record, [])
   );
-  const dataSource = useLiveify("vendor", queryDataSource, (record: IVendor) => record);
 
   if (tableProps.pagination) {
     tableProps.pagination.showSizeChanger = true;