fix: use stable array to prevent memoization issue in useList #7019

.changeset/nice-papayas-care.md

@@ -0,0 +1,11 @@
+---
+"@refinedev/core": patch
+---
+
+fix: use stable array to prevent memoization issue in useList. #7019
+
+Fixed an issue where `useList`, `useMany`, `useTable`, and `useCustom` hooks created new empty arrays/objects on every render. This caused `useEffect` and `useMemo` to trigger unnecessarily.
+
+Now these hooks use stable references for better performance.
+
+Fixes #7019

packages/core/src/hooks/data/useCustom.ts

@@ -114,6 +114,8 @@ export type UseCustomReturnType<TData, TError> = {
   };
 } & UseLoadingOvertimeReturnType;
 
+const EMPTY_OBJECT = Object.freeze({}) as any;
+
 export const useCustom = <
   TQueryFnData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,
@@ -231,7 +233,7 @@ export const useCustom = <
     return {
       query: queryResponse,
       result: {
-        data: queryResponse.data?.data || ({} as TData),
+        data: queryResponse.data?.data || EMPTY_OBJECT,
       },
       overtime: { elapsedTime },
     };

packages/core/src/hooks/data/useList.ts

@@ -101,6 +101,8 @@ export type UseListReturnType<TData, TError> = {
   };
 } & UseLoadingOvertimeReturnType;
 
+const EMPTY_ARRAY = Object.freeze([]) as [];
+
 /**
  * `useList` is a modified version of `react-query`'s {@link https://tanstack.com/query/v5/docs/framework/react/guides/queries `useQuery`} used for retrieving items from a `resource` with pagination, sort, and filter configurations.
  *
@@ -315,7 +317,7 @@ export const useList = <
   return {
     query: queryResponse,
     result: {
-      data: queryResponse?.data?.data || [],
+      data: queryResponse?.data?.data || EMPTY_ARRAY,
       total: queryResponse?.data?.total,
     },
     overtime: { elapsedTime },

packages/core/src/hooks/data/useMany.ts

@@ -85,6 +85,8 @@ export type UseManyProps<TQueryFnData, TError, TData> = {
   LiveModeProps &
   UseLoadingOvertimeOptionsProps;
 
+const EMPTY_ARRAY = Object.freeze([]) as [];
+
 /**
  * `useMany` is a modified version of `react-query`'s {@link https://tanstack.com/query/v5/docs/framework/react/guides/queries `useQuery`} used for retrieving multiple items from a `resource`.
  *
@@ -259,7 +261,7 @@ export const useMany = <
   return {
     query: queryResponse,
     result: {
-      data: queryResponse?.data?.data || [],
+      data: queryResponse?.data?.data || EMPTY_ARRAY,
     },
     overtime: { elapsedTime },
   };

packages/core/src/hooks/useTable/index.ts

@@ -176,6 +176,7 @@ export type useTableReturnType<
 
 const defaultPermanentFilter: CrudFilter[] = [];
 const defaultPermanentSorter: CrudSort[] = [];
+const EMPTY_ARRAY = Object.freeze([]) as [];
 
 export function useTable<
   TQueryFnData extends BaseRecord = BaseRecord,
@@ -434,7 +435,7 @@ export function useTable<
     createLinkForSyncWithLocation,
     overtime: queryResult.overtime,
     result: {
-      data: queryResult.result?.data || [],
+      data: queryResult.result?.data || EMPTY_ARRAY,
       total: queryResult.result?.total,
     },
   };