@refinedev/core 5.0.5 → 5.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "5.0.5",
+  "version": "5.0.7",
   "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/components/containers/refine/index.tsx

@@ -57,6 +57,9 @@ export const Refine: React.FC<RefineProps> = ({
     options,
   });
 
+  const disableRouteChangeHandler =
+    optionsWithDefaults.disableRouteChangeHandler;
+
   const queryClient = useDeepMemo(() => {
     if (reactQueryWithDefaults.clientConfig instanceof QueryClient) {
       return reactQueryWithDefaults.clientConfig;
@@ -127,7 +130,9 @@ export const Refine: React.FC<RefineProps> = ({
                               <React.Fragment>
                                 {children}
                                 {!disableTelemetryWithDefault && <Telemetry />}
-                                <RouteChangeHandler />
+                                {!disableRouteChangeHandler && (
+                                  <RouteChangeHandler />
+                                )}
                               </React.Fragment>
                             </UnsavedWarnContextProvider>
                           </RefineContextProvider>

package/src/contexts/refine/index.tsx

@@ -56,6 +56,7 @@ export const defaultRefineOptions: IRefineContextOptions = {
     singular: pluralize.singular,
   },
   disableServerSideValidation: false,
+  disableRouteChangeHandler: false,
   title: defaultTitle,
 };
 

package/src/contexts/refine/types.ts

@@ -73,6 +73,7 @@ export interface IRefineOptions {
   undoableTimeout?: number;
   liveMode?: LiveModeProps["liveMode"];
   disableTelemetry?: boolean;
+  disableRouteChangeHandler?: boolean;
   redirect?: {
     afterCreate?: RedirectAction;
     afterClone?: RedirectAction;
@@ -118,6 +119,7 @@ export interface IRefineContextOptions {
   overtime: UseLoadingOvertimeRefineContext;
   textTransformers: Required<TextTransformers>;
   disableServerSideValidation: boolean;
+  disableRouteChangeHandler: boolean;
   projectId?: string;
   title: {
     icon?: React.ReactNode;

package/src/definitions/helpers/handleRefineOptions/index.ts

@@ -17,6 +17,7 @@ type HandleRefineOptionsProps = {
   undoableTimeout?: number;
   liveMode?: LiveModeProps["liveMode"];
   disableTelemetry?: boolean;
+  disableRouteChangeHandler?: boolean;
   reactQueryClientConfig?: QueryClientConfig;
   reactQueryDevtoolConfig?: any | false;
 };
@@ -39,6 +40,7 @@ export const handleRefineOptions = ({
   syncWithLocation,
   undoableTimeout,
   warnWhenUnsavedChanges,
+  disableRouteChangeHandler,
 }: HandleRefineOptionsProps = {}): HandleRefineOptionsReturnValues => {
   const optionsWithDefaults: IRefineContextOptions = {
     breadcrumb: options?.breadcrumb,
@@ -95,6 +97,10 @@ export const handleRefineOptions = ({
           ? defaultRefineOptions.title.text
           : options?.title?.text,
     },
+    disableRouteChangeHandler:
+      options?.disableRouteChangeHandler ??
+      disableRouteChangeHandler ??
+      defaultRefineOptions.disableRouteChangeHandler,
   };
 
   const disableTelemetryWithDefault =

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