diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -7,6 +7,7 @@
   updateRelationshipsActionTypes,
 } from 'lib/actions/relationship-actions.js';
 import { searchUsers } from 'lib/actions/user-actions.js';
+import { useENSNames } from 'lib/hooks/ens-cache';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js';
 import type {
@@ -161,33 +162,35 @@
     [pendingUsersToAdd],
   );
 
+  const pendingUsersWithENSNames = useENSNames(pendingUsersToAdd);
   const userTags = React.useMemo(() => {
-    if (pendingUsersToAdd.length === 0) {
+    if (pendingUsersWithENSNames.length === 0) {
       return null;
     }
-    const tags = pendingUsersToAdd.map(userInfo => (
+    const tags = pendingUsersWithENSNames.map(userInfo => (
       <Label key={userInfo.id} onClose={() => deselectUser(userInfo.id)}>
         {userInfo.username}
       </Label>
     ));
     return <div className={css.userTagsContainer}>{tags}</div>;
-  }, [deselectUser, pendingUsersToAdd]);
+  }, [deselectUser, pendingUsersWithENSNames]);
 
   const filteredUsers = React.useMemo(
     () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)),
     [pendingUserIDs, sortedUsers],
   );
+  const filteredUsersWithENSNames = useENSNames(filteredUsers);
 
   const userRows = React.useMemo(
     () =>
-      filteredUsers.map(userInfo => (
+      filteredUsersWithENSNames.map(userInfo => (
         <AddUsersListItem
           userInfo={userInfo}
           key={userInfo.id}
           selectUser={selectUser}
         />
       )),
-    [filteredUsers, selectUser],
+    [filteredUsersWithENSNames, selectUser],
   );
 
   const [errorMessage, setErrorMessage] = React.useState('');
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
@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
+import { useENSNames } from 'lib/hooks/ens-cache';
 import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors';
 import type { AccountUserInfo } from 'lib/types/user-types';
 
@@ -53,17 +54,18 @@
     }
     return unfilteredUserInfos.filter(filterUser).sort(usersComparator);
   }, [filterUser, searchResult, searchText, userInfos, usersComparator]);
+  const usersWithENSNames = useENSNames<AccountUserInfo>(users);
 
   const userRows = React.useMemo(() => {
     const UserRow = userRowComponent;
-    return users.map(user => (
+    return usersWithENSNames.map(user => (
       <UserRow
         userInfo={user}
         key={user.id}
         onMenuVisibilityChange={onMenuVisibilityChange}
       />
     ));
-  }, [userRowComponent, users, onMenuVisibilityChange]);
+  }, [userRowComponent, usersWithENSNames, onMenuVisibilityChange]);
 
   const containerClasses = classNames(css.container, {
     [css.noScroll]: isMenuVisible,