diff --git a/lib/utils/role-utils.js b/lib/utils/role-utils.js
--- a/lib/utils/role-utils.js
+++ b/lib/utils/role-utils.js
@@ -1,5 +1,7 @@
 // @flow
 
+import _groupBy from 'lodash/fp/groupBy.js';
+import _toPairs from 'lodash/fp/toPairs.js';
 import * as React from 'react';
 
 import { useSelector } from './redux-utils.js';
@@ -93,6 +95,36 @@
   return roleMap;
 }
 
+type GroupedRoleInfo = {
+  +roleName: string,
+  +memberInfos: $ReadOnlyArray<RelativeMemberInfo>,
+};
+
+function useMembersGroupedByRole(
+  threadInfo: ThreadInfo,
+): $ReadOnlyArray<GroupedRoleInfo> {
+  const { members } = threadInfo;
+  const roles = useRolesFromCommunityThreadInfo(threadInfo, members);
+
+  const groupByRoleName = React.useMemo(
+    () => _groupBy(member => roles.get(member.id)?.name)(members),
+    [members, roles],
+  );
+
+  const groupedRoleInfos = _toPairs(groupByRoleName)
+    .sort((a, b) => {
+      return a[0].localeCompare(b[0]);
+    })
+    .map(([roleName, memberInfos]) => {
+      return {
+        roleName,
+        memberInfos,
+      };
+    });
+
+  return groupedRoleInfos;
+}
+
 function toggleUserSurfacedPermission(
   rolePermissions: ThreadRolePermissionsBlob,
   userSurfacedPermission: UserSurfacedPermission,
@@ -124,4 +156,5 @@
   useRoleDeletableAndEditableStatus,
   useRolesFromCommunityThreadInfo,
   toggleUserSurfacedPermission,
+  useMembersGroupedByRole,
 };