diff --git a/web/modals/threads/members/add-members-group.react.js b/web/modals/components/add-members-group.react.js
rename from web/modals/threads/members/add-members-group.react.js
rename to web/modals/components/add-members-group.react.js
--- a/web/modals/threads/members/add-members-group.react.js
+++ b/web/modals/components/add-members-group.react.js
@@ -5,7 +5,7 @@
 import type { UserListItem } from 'lib/types/user-types';
 
 import AddMembersItem from './add-members-item.react';
-import css from './members-modal.css';
+import css from './add-members.css';
 
 type AddMemberItemGroupProps = {
   +header: ?string,
diff --git a/web/modals/threads/members/add-members-item.react.js b/web/modals/components/add-members-item.react.js
rename from web/modals/threads/members/add-members-item.react.js
rename to web/modals/components/add-members-item.react.js
--- a/web/modals/threads/members/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -4,7 +4,7 @@
 
 import type { UserListItem } from 'lib/types/user-types';
 
-import css from './members-modal.css';
+import css from './add-members.css';
 
 type AddMembersItemProps = {
   +userInfo: UserListItem,
diff --git a/web/modals/components/add-members-list.react.js b/web/modals/components/add-members-list.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/components/add-members-list.react.js
@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+
+import type { UserListItem } from 'lib/types/user-types';
+
+import AddMembersItemGroup from './add-members-group.react';
+
+type MemberGroupItem = {
+  +header: ?string,
+  +userInfos: $ReadOnlyArray<UserListItem>,
+};
+
+type Props = {
+  +switchUser: string => void,
+  +pendingUsersToAdd: $ReadOnlySet<string>,
+  +sortedGroupedUsersList: $ReadOnlyArray<MemberGroupItem>,
+};
+
+function AddMembersList(props: Props): React.Node {
+  const { switchUser, pendingUsersToAdd, sortedGroupedUsersList } = props;
+
+  const addMembersList = React.useMemo(
+    () =>
+      sortedGroupedUsersList.map(({ header, userInfos }) => (
+        <AddMembersItemGroup
+          key={header}
+          header={header}
+          userInfos={userInfos}
+          onUserClick={switchUser}
+          usersAdded={pendingUsersToAdd}
+        />
+      )),
+    [sortedGroupedUsersList, switchUser, pendingUsersToAdd],
+  );
+
+  return addMembersList;
+}
+
+export default AddMembersList;
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
new file mode 100644
--- /dev/null
+++ b/web/modals/components/add-members.css
@@ -0,0 +1,41 @@
+div.addMemberItemsGroupHeader {
+  font-size: var(--s-font-14);
+  color: var(--add-members-group-header-color);
+  margin: 16px;
+}
+
+button.addMemberItem {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--add-members-item-color);
+  font-size: var(--l-font-18);
+  background-color: transparent;
+  border: none;
+  width: 100%;
+}
+
+button.addMemberItem:hover {
+  color: var(--add-members-item-color-hover);
+}
+
+button.addMemberItem:disabled {
+  color: var(--add-members-item-disabled-color);
+  cursor: not-allowed;
+}
+
+button.addMemberItem:hover:disabled {
+  color: var(--add-members-item-disabled-color-hover);
+}
+
+button.addMemberItem .label {
+  padding: 8px 16px;
+}
+
+button.addMemberItem .danger {
+  color: var(--add-members-remove-pending-color);
+}
+button.addMemberItem:hover .danger {
+  color: var(--add-members-remove-pending-color-hover);
+}
diff --git a/web/modals/threads/members/add-members-list.react.js b/web/modals/threads/members/add-members-list-content.react.js
rename from web/modals/threads/members/add-members-list.react.js
rename to web/modals/threads/members/add-members-list-content.react.js
--- a/web/modals/threads/members/add-members-list.react.js
+++ b/web/modals/threads/members/add-members-list-content.react.js
@@ -6,7 +6,7 @@
 
 import type { UserListItem } from 'lib/types/user-types';
 
-import AddMembersItemGroup from './add-members-group.react';
+import AddMembersList from '../../components/add-members-list.react';
 
 type Props = {
   +userListItems: $ReadOnlyArray<UserListItem>,
@@ -15,7 +15,7 @@
   +hasParentThread: boolean,
 };
 
-function AddMembersList(props: Props): React.Node {
+function AddMembersListContent(props: Props): React.Node {
   const {
     userListItems,
     pendingUsersToAdd,
@@ -67,19 +67,19 @@
         membersInParentThread,
         ...membersNotInParentThread,
         usersUnavailableToAdd,
-      ].filter(Boolean),
+      ]
+        .filter(Boolean)
+        .map(([header, userInfos]) => ({ header, userInfos })),
     [membersInParentThread, membersNotInParentThread, usersUnavailableToAdd],
   );
 
-  return sortedGroupedUsersList.map(([header, userInfos]) => (
-    <AddMembersItemGroup
-      key={header}
-      header={header}
-      userInfos={userInfos}
-      onUserClick={switchUser}
-      usersAdded={pendingUsersToAdd}
+  return (
+    <AddMembersList
+      switchUser={switchUser}
+      pendingUsersToAdd={pendingUsersToAdd}
+      sortedGroupedUsersList={sortedGroupedUsersList}
     />
-  ));
+  );
 }
 
-export default AddMembersList;
+export default AddMembersListContent;
diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -22,7 +22,7 @@
 import Label from '../../../components/label.react';
 import { useSelector } from '../../../redux/redux-utils';
 import SearchModal from '../../search-modal.react';
-import AddMembersList from './add-members-list.react';
+import AddMembersListContent from './add-members-list-content.react';
 import css from './members-modal.css';
 
 type ContentProps = {
@@ -139,7 +139,7 @@
     <div className={css.addMembersContent}>
       {labelItems}
       <div className={css.addMembersListContainer}>
-        <AddMembersList
+        <AddMembersListContent
           userListItems={userSearchResults}
           switchUser={onSwitchUser}
           pendingUsersToAdd={pendingUsersToAdd}
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -91,45 +91,3 @@
   column-gap: 16px;
   margin-top: 16px;
 }
-
-div.addMemberItemsGroupHeader {
-  font-size: var(--s-font-14);
-  color: var(--add-members-group-header-color);
-  margin: 16px;
-}
-
-button.addMemberItem {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--add-members-item-color);
-  font-size: var(--l-font-18);
-  background-color: transparent;
-  border: none;
-  width: 100%;
-}
-
-button.addMemberItem:hover {
-  color: var(--add-members-item-color-hover);
-}
-
-button.addMemberItem:disabled {
-  color: var(--add-members-item-disabled-color);
-  cursor: not-allowed;
-}
-
-button.addMemberItem:hover:disabled {
-  color: var(--add-members-item-disabled-color-hover);
-}
-
-button.addMemberItem .label {
-  padding: 8px 16px;
-}
-
-button.addMemberItem .danger {
-  color: var(--add-members-remove-pending-color);
-}
-button.addMemberItem:hover .danger {
-  color: var(--add-members-remove-pending-color-hover);
-}