Add cache to usePermissions to avoid uncessessary render

marmelab · Jan 20, 2021 · 1ab2471 · 1ab2471
1 parent a9c2833
commit 1ab2471
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
@@ -13,6 +13,7 @@ import {
     ChipField,
     Datagrid,
     DateField,
+    DeleteButton,
     downloadCSV,
     EditButton,
     Filter,
@@ -171,6 +172,11 @@ const PostList = props => {
                     <PostListActionToolbar>
                         <EditButton />
                         <ShowButton />
+                        <DeleteButton label={'Undoable Delete'} />
+                        <DeleteButton
+                            label={'Regular Delete'}
+                            undoable={false}
+                        />
                     </PostListActionToolbar>
                 </Datagrid>
             )}

diff --git a/packages/ra-core/src/auth/usePermissions.spec.tsx b/packages/ra-core/src/auth/usePermissions.spec.tsx
@@ -20,6 +20,12 @@ const stateInpector = state => (
     </div>
 );
 
+let renderCount = 0;
+const renderInspector = () => {
+    renderCount++;
+    return <div>{renderCount}</div>;
+};
+
 describe('usePermissions', () => {
     it('should return a loading state on mount', () => {
         const { queryByText } = renderWithRedux(
@@ -79,4 +85,16 @@ describe('usePermissions', () => {
             expect(queryByText('ERROR')).not.toBeNull();
         });
     });
+
+    it('should not rerender once the permissions have been rertieved once', async () => {
+        const { queryByText, rerender } = renderWithRedux(
+            <UsePermissions>{renderInspector}</UsePermissions>
+        );
+
+        await new Promise(resolve => setTimeout(resolve, 10));
+        expect(queryByText('2')).not.toBeNull();
+
+        rerender(<UsePermissions>{renderInspector}</UsePermissions>);
+        expect(queryByText('3')).not.toBeNull();
+    });
 });
diff --git a/packages/ra-core/src/auth/usePermissions.ts b/packages/ra-core/src/auth/usePermissions.ts
@@ -12,6 +12,8 @@ interface State {
 
 const emptyParams = {};
 
+const cache = {};
+
 /**
  * Hook for getting user permissions
  *
@@ -43,14 +45,20 @@ const emptyParams = {};
  *     };
  */
 const usePermissions = (params = emptyParams) => {
+    const cacheKey = JSON.stringify(params);
+
     const [state, setState] = useSafeSetState<State>({
         loading: true,
         loaded: false,
+        permissions: cache[cacheKey],
     });
+
     const getPermissions = useGetPermissions();
+
     useEffect(() => {
         getPermissions(params)
             .then(permissions => {
+                cache[cacheKey] = permissions;
                 setState({ loading: false, loaded: true, permissions });
             })
             .catch(error => {
@@ -60,7 +68,7 @@ const usePermissions = (params = emptyParams) => {
                     error,
                 });
             });
-    }, [getPermissions, params, setState]);
+    }, [getPermissions, params, setState, cacheKey]);
     return state;
 };
 

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
@@ -59,7 +59,7 @@ const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = props => {
             unselectAll(resource);
             refresh();
         },
-        onFailure: error =>
+        onFailure: error => {
             notify(
                 typeof error === 'string'
                     ? error
@@ -73,7 +73,9 @@ const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = props => {
                             ? error.message
                             : undefined,
                 }
-            ),
+            );
+            refresh();
+        },
         undoable: true,
     });