Improve memory footprint of useCanAccess when it targets a record

Author: djhi

packages/ra-core/src/auth/CanAccess.stories.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Location } from 'react-router';
 import { QueryClient } from '@tanstack/react-query';
 import { AuthProvider } from '../types';
-import { CoreAdminContext } from '../core';
+import { CoreAdminContext } from '../core/CoreAdminContext';
 import { CanAccess } from './CanAccess';
-import { TestMemoryRouter } from '..';
+import { TestMemoryRouter } from '../routing/TestMemoryRouter';
 
 export default {
     title: 'ra-core/auth/CanAccess',
@@ -109,3 +109,45 @@ export const NoAuthProvider = () => (
         </CoreAdminContext>
     </TestMemoryRouter>
 );
+
+const data = Array.from({ length: 1000 }, (_, i) => {
+    const post = {
+        id: i + 1,
+        title: `Post ${i + 1}`,
+        body: `This is the body of post ${i + 1}`,
+    };
+
+    Array.from({ length: 100 }, (_, i) => {
+        post[`property${i + 1}`] = `Another very long property ${i + 1}`;
+    });
+
+    return post;
+});
+
+export const ManyCalls = ({
+    authProvider = defaultAuthProvider,
+    queryClient,
+}: {
+    authProvider?: AuthProvider | null;
+    queryClient?: QueryClient;
+}) => (
+    <TestMemoryRouter>
+        <CoreAdminContext
+            authProvider={authProvider != null ? authProvider : undefined}
+            queryClient={queryClient}
+        >
+            <div>
+                {data.map(post => (
+                    <CanAccess
+                        key={post.id}
+                        action="read"
+                        resource="posts"
+                        record={post}
+                    >
+                        <div>{post.title}</div>
+                    </CanAccess>
+                ))}
+            </div>
+        </CoreAdminContext>
+    </TestMemoryRouter>
+);

packages/ra-core/src/auth/useCanAccess.ts

@@ -62,11 +62,15 @@ export const useCanAccess = <
         );
     }
     const record = useRecordContext<RecordType>(params);
-
+    const { record: _record, ...restParams } = params;
     const authProviderHasCanAccess = !!authProvider?.canAccess;
 
     const queryResult = useQuery({
-        queryKey: ['auth', 'canAccess', { ...params, record, resource }],
+        queryKey: [
+            'auth',
+            'canAccess',
+            { ...restParams, recordId: record?.id, resource },
+        ],
         queryFn: async ({ signal }) => {
             if (!authProvider || !authProvider.canAccess) {
                 return true;