@refinedev/core 5.0.5 → 5.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "private": false,
   "description": "Refine is a React meta-framework for building enterprise-level, data-intensive applications rapidly with support for modern UI libraries and headless integrations.",
   "repository": {

package/src/hooks/data/useList.ts

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 
 import { getXRay } from "@refinedev/devtools-internal";
+import { useMemo } from "react";
 import {
   type QueryObserverResult,
   type UseQueryOptions,
@@ -200,6 +201,38 @@ export const useList = <
     },
   });
 
+  // Memoize the select function to prevent it from running multiple times
+  // Note: If queryOptions.select is not memoized by the user, this will still
+  // re-run on every render. Users should wrap their select function in useCallback.
+  const memoizedSelect = useMemo(() => {
+    return (rawData: GetListResponse<TQueryFnData>): GetListResponse<TData> => {
+      let data = rawData;
+
+      if (prefferedPagination.mode === "client") {
+        data = {
+          ...data,
+          data: data.data.slice(
+            (prefferedPagination.currentPage - 1) *
+              prefferedPagination.pageSize,
+            prefferedPagination.currentPage * prefferedPagination.pageSize,
+          ),
+          total: data.total,
+        };
+      }
+
+      if (queryOptions?.select) {
+        return queryOptions?.select?.(data);
+      }
+
+      return data as unknown as GetListResponse<TData>;
+    };
+  }, [
+    prefferedPagination.currentPage,
+    prefferedPagination.pageSize,
+    prefferedPagination.mode,
+    queryOptions?.select,
+  ]);
+
   const queryResponse = useQuery<
     GetListResponse<TQueryFnData>,
     TError,
@@ -238,28 +271,7 @@ export const useList = <
       typeof queryOptions?.enabled !== "undefined"
         ? queryOptions?.enabled
         : !!resource?.name,
-    select: (rawData) => {
-      let data = rawData;
-
-      const { currentPage, mode, pageSize } = prefferedPagination;
-
-      if (mode === "client") {
-        data = {
-          ...data,
-          data: data.data.slice(
-            (currentPage - 1) * pageSize,
-            currentPage * pageSize,
-          ),
-          total: data.total,
-        };
-      }
-
-      if (queryOptions?.select) {
-        return queryOptions?.select?.(data);
-      }
-
-      return data as unknown as GetListResponse<TData>;
-    },
+    select: memoizedSelect,
     meta: {
       ...queryOptions?.meta,
       ...getXRay("useList", resource?.name),

package/src/hooks/form/index.ts

@@ -302,12 +302,28 @@ export const useForm = <
     return submissionPromise;
   };
 
-  const onFinishAutoSave = asyncDebounce(
-    (values: TVariables) => onFinish(values, { isAutosave: true }),
-    props.autoSave?.debounce || 1000,
-    "Cancelled by debounce",
+  const onFinishRef = React.useRef(onFinish);
+  React.useEffect(() => {
+    onFinishRef.current = onFinish;
+  }, [onFinish]);
+
+  const onFinishAutoSave = React.useMemo(
+    () =>
+      asyncDebounce(
+        (values: TVariables) =>
+          onFinishRef.current(values, { isAutosave: true }),
+        props.autoSave?.debounce ?? 1000,
+        "Cancelled by debounce",
+      ),
+    [props.autoSave?.debounce],
   );
 
+  React.useEffect(() => {
+    return () => {
+      onFinishAutoSave.cancel();
+    };
+  }, [onFinishAutoSave]);
+
   const overtime = {
     elapsedTime,
   };