diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ProtectedEditPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ProtectedEditPage/index.js
index 2940296a4e..b3c62d16fe 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ProtectedEditPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ProtectedEditPage/index.js
@@ -9,13 +9,20 @@ import EditPage from '../EditPage';
 
 const ProtectedEditPage = () => {
   const permissions = useSelector(selectAdminPermissions);
+
+  // TODO: this is necessary because otherwise we run into an
+  // infinite rendering loop
+  const permissionsMemoized = React.useMemo(() => {
+    return {
+      read: permissions.settings.roles.read,
+      update: permissions.settings.roles.update,
+    };
+  }, [permissions.settings.roles.read, permissions.settings.roles.update]);
+
   const {
     isLoading,
     allowedActions: { canRead, canUpdate },
-  } = useRBAC({
-    read: permissions.settings.roles.read,
-    update: permissions.settings.roles.update,
-  });
+  } = useRBAC(permissionsMemoized);
 
   if (isLoading) {
     return <LoadingIndicatorPage />;