diff --git a/web/settings/relationship/block-list-modal.react.js b/web/settings/relationship/block-list-modal.react.js
--- a/web/settings/relationship/block-list-modal.react.js
+++ b/web/settings/relationship/block-list-modal.react.js
@@ -4,13 +4,13 @@
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
-import type { AccountUserInfo } from 'lib/types/user-types.js';
+import type { AccountUserInfo, UserInfo } from 'lib/types/user-types.js';
 
 import BlockListRow from './block-list-row.react.js';
 import BlockUsersModal from './block-users-modal.react.js';
 import UserListModal from './user-list-modal.react.js';
 
-function filterUser(userInfo: AccountUserInfo) {
+function filterUser(userInfo: UserInfo) {
   return (
     userInfo.relationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER ||
     userInfo.relationshipStatus === userRelationshipStatus.BOTH_BLOCKED
diff --git a/web/settings/relationship/friend-list-modal.react.js b/web/settings/relationship/friend-list-modal.react.js
--- a/web/settings/relationship/friend-list-modal.react.js
+++ b/web/settings/relationship/friend-list-modal.react.js
@@ -4,7 +4,7 @@
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
-import type { AccountUserInfo } from 'lib/types/user-types.js';
+import type { AccountUserInfo, UserInfo } from 'lib/types/user-types.js';
 
 import AddFriendsModal from './add-friends-modal.react.js';
 import FriendListRow from './friend-list-row.react.js';
@@ -16,7 +16,7 @@
   userRelationshipStatus.FRIEND,
 ];
 
-function filterUser(userInfo: AccountUserInfo) {
+function filterUser(userInfo: UserInfo) {
   return relationships.includes(userInfo.relationshipStatus);
 }
 
diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
--- a/web/settings/relationship/user-list-modal.react.js
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type { AccountUserInfo } from 'lib/types/user-types.js';
+import type { AccountUserInfo, UserInfo } from 'lib/types/user-types.js';
 
 import css from './user-list.css';
 import { UserList, type UserRowProps } from './user-list.react.js';
@@ -13,7 +13,7 @@
   +onClose: () => void,
   +name: string,
   +userRowComponent: React.ComponentType<UserRowProps>,
-  +filterUser: (userInfo: AccountUserInfo) => boolean,
+  +filterUser: (userInfo: UserInfo) => boolean,
   +usersComparator: (user1: AccountUserInfo, user2: AccountUserInfo) => number,
   +buttonLabel: string,
   +onAddUsersClick: () => void,
diff --git a/web/settings/relationship/user-list.react.js b/web/settings/relationship/user-list.react.js
--- a/web/settings/relationship/user-list.react.js
+++ b/web/settings/relationship/user-list.react.js
@@ -4,8 +4,9 @@
 import * as React from 'react';
 
 import { useENSNames } from 'lib/hooks/ens-cache.js';
-import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js';
-import type { AccountUserInfo } from 'lib/types/user-types.js';
+import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
+import type { AccountUserInfo, UserInfo } from 'lib/types/user-types.js';
+import { values } from 'lib/utils/objects.js';
 
 import css from './user-list.css';
 import { useSelector } from '../../redux/redux-utils.js';
@@ -17,7 +18,7 @@
 
 type UserListProps = {
   +userRowComponent: React.ComponentType<UserRowProps>,
-  +filterUser: (userInfo: AccountUserInfo) => boolean,
+  +filterUser: (userInfo: UserInfo) => boolean,
   +usersComparator: (user1: AccountUserInfo, user2: AccountUserInfo) => number,
   +searchText: string,
 };
@@ -25,7 +26,11 @@
 export function UserList(props: UserListProps): React.Node {
   const { userRowComponent, filterUser, usersComparator, searchText } = props;
   const userInfos = useSelector(state => state.userStore.userInfos);
-  const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
+  const userInfosArray = React.useMemo(
+    () => values(userInfos).filter(filterUser),
+    [userInfos, filterUser],
+  );
+  const userStoreSearchIndex = useUserSearchIndex(userInfosArray);
   const [isMenuVisible, setIsMenuVisible] = React.useState(false);
 
   const onMenuVisibilityChange = React.useCallback(
@@ -39,21 +44,21 @@
   );
 
   const users = React.useMemo(() => {
-    const userIDs = searchText ? searchResult : Object.keys(userInfos);
-    const unfilteredUserInfos = [];
+    const userIDs = searchText ? searchResult : userInfosArray.map(u => u.id);
+    const matchedUserInfos = [];
     for (const id of userIDs) {
       const { username, relationshipStatus } = userInfos[id];
       if (!username) {
         continue;
       }
-      unfilteredUserInfos.push({
+      matchedUserInfos.push({
         id,
         username,
         relationshipStatus,
       });
     }
-    return unfilteredUserInfos.filter(filterUser).sort(usersComparator);
-  }, [filterUser, searchResult, searchText, userInfos, usersComparator]);
+    return matchedUserInfos.sort(usersComparator);
+  }, [userInfosArray, searchResult, searchText, userInfos, usersComparator]);
   const usersWithENSNames = useENSNames<AccountUserInfo>(users);
 
   const userRows = React.useMemo(() => {