Merge pull request #5607 from marmelab/fix-usePermissions-rerender

Fix usePermissions always triggers a re-render even though the permissions are unchanged

Author: djhi

packages/ra-core/src/auth/WithPermissions.tsx

@@ -9,7 +9,7 @@ import { Location } from 'history';
 
 import warning from '../util/warning';
 import useAuthenticated from './useAuthenticated';
-import usePermissions from './usePermissions';
+import usePermissionsOptimized from './usePermissionsOptimized';
 
 export interface WithPermissionsChildrenParams {
     permissions: any;
@@ -81,7 +81,7 @@ const WithPermissions: FunctionComponent<Props> = ({
     );
 
     useAuthenticated(authParams);
-    const { permissions } = usePermissions(authParams);
+    const { permissions } = usePermissionsOptimized(authParams);
     // render even though the usePermissions() call isn't finished (optimistic rendering)
     if (component) {
         return createElement(component, { permissions, ...props });

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

@@ -3,6 +3,7 @@ import AuthContext from './AuthContext';
 import useAuthProvider from './useAuthProvider';
 import useAuthState from './useAuthState';
 import usePermissions from './usePermissions';
+import usePermissionsOptimized from './usePermissionsOptimized';
 import useAuthenticated from './useAuthenticated';
 import WithPermissions from './WithPermissions';
 import useLogin from './useLogin';
@@ -26,6 +27,7 @@ export {
     useGetPermissions,
     // hooks with state management
     usePermissions,
+    usePermissionsOptimized,
     useAuthState,
     // hook with immediate effect
     useAuthenticated,

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

@@ -15,7 +15,7 @@ const emptyParams = {};
 /**
  * Hook for getting user permissions
  *
- * Calls the authProvider.getPrmissions() method asynchronously.
+ * Calls the authProvider.getPermissions() method asynchronously.
  * If the authProvider returns a rejected promise, returns empty permissions.
  *
  * The return value updates according to the request state:

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

@@ -0,0 +1,79 @@
+import { useEffect } from 'react';
+import isEqual from 'lodash/isEqual';
+
+import useGetPermissions from './useGetPermissions';
+import { useSafeSetState } from '../util/hooks';
+
+interface State {
+    permissions?: any;
+    error?: any;
+}
+
+const emptyParams = {};
+
+// keep a cache of already fetched permissions to initialize state for new
+// components and avoid a useless rerender if the permissions haven't changed
+const alreadyFetchedPermissions = { '{}': [] };
+
+/**
+ * Hook for getting user permissions without the loading state.
+ *
+ * When compared to usePermissions, this hook doesn't cause a re-render
+ * when the permissions haven't changed since the last call.
+ *
+ * This hook doesn't handle the loading state.
+ *
+ * @see usePermissions
+ *
+ * Calls the authProvider.getPermissions() method asynchronously.
+ * If the authProvider returns a rejected promise, returns empty permissions.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start:   { permissions: [previously fetched permissions for these params] }
+ * - success: { permissions: [permissions returned by the authProvider (usually the same as on start)] }
+ * - error:   { error: [error from provider] }
+ *
+ * Useful to enable features based on user permissions
+ *
+ * @param {Object} params Any params you want to pass to the authProvider
+ *
+ * @returns The current auth check state. Destructure as { permissions, error }.
+ *
+ * @example
+ *     import { usePermissionsOptimized } from 'react-admin';
+ *
+ *     const PostDetail = props => {
+ *         const { permissions } = usePermissionsOptimized();
+ *         if (permissions !== 'editor') {
+ *             return <Redirect  to={`posts/${props.id}/show`} />
+ *         } else {
+ *             return <PostEdit {...props} />
+ *         }
+ *     };
+ */
+const usePermissionsOptimized = (params = emptyParams) => {
+    const [state, setState] = useSafeSetState<State>({
+        permissions: alreadyFetchedPermissions[JSON.stringify(params)],
+    });
+    const getPermissions = useGetPermissions();
+    useEffect(() => {
+        getPermissions(params)
+            .then(permissions => {
+                const key = JSON.stringify(params);
+                if (!isEqual(permissions, alreadyFetchedPermissions[key])) {
+                    alreadyFetchedPermissions[key] = permissions;
+                    setState({ permissions });
+                }
+            })
+            .catch(error => {
+                setState({
+                    error,
+                });
+            });
+    }, [getPermissions, params, setState]);
+
+    return state;
+};
+
+export default usePermissionsOptimized;