diff --git a/web/settings/relationship/add-friends-modal.react.js b/web/settings/relationship/add-friends-modal.react.js
--- a/web/settings/relationship/add-friends-modal.react.js
+++ b/web/settings/relationship/add-friends-modal.react.js
@@ -8,6 +8,7 @@
 } from 'lib/types/relationship-types.js';
 
 import AddUsersListModal from './add-users-list-modal.react.js';
+import { AddUsersListProvider } from './add-users-list-provider.react.js';
 
 const excludedStatuses = new Set([
   userRelationshipStatus.FRIEND,
@@ -18,14 +19,21 @@
 ]);
 
 function AddFriendsModal(): React.Node {
-  return (
-    <AddUsersListModal
-      name="Add friends"
-      excludedStatuses={excludedStatuses}
-      confirmButtonContent="Send friend requests"
-      relationshipAction={relationshipActions.FRIEND}
-    />
+  const addFriendsModal = React.useMemo(
+    () => (
+      <AddUsersListProvider>
+        <AddUsersListModal
+          name="Add friends"
+          excludedStatuses={excludedStatuses}
+          confirmButtonContent="Send friend requests"
+          relationshipAction={relationshipActions.FRIEND}
+        />
+      </AddUsersListProvider>
+    ),
+    [],
   );
+
+  return addFriendsModal;
 }
 
 export default AddFriendsModal;
diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -12,10 +12,10 @@
   UserRelationshipStatus,
   RelationshipAction,
 } from 'lib/types/relationship-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
 import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
+import { useAddUsersListContext } from './add-users-list-provider.react.js';
 import css from './add-users-list.css';
 import AddUsersList from './add-users-list.react.js';
 import type { ButtonColor } from '../../components/button.react.js';
@@ -47,23 +47,16 @@
 
   const { popModal } = useModalContext();
 
-  const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
-    $ReadOnlyMap<string, GlobalAccountUserInfo>,
-  >(new Map());
-
-  const [errorMessage, setErrorMessage] = React.useState('');
+  const { pendingUsersToAdd, setErrorMessage } = useAddUsersListContext();
 
   const addUsersListChildGenerator = React.useCallback(
     (searchText: string) => (
       <AddUsersList
         searchText={searchText}
         excludedStatuses={excludedStatuses}
-        pendingUsersToAdd={pendingUsersToAdd}
-        setPendingUsersToAdd={setPendingUsersToAdd}
-        errorMessage={errorMessage}
       />
     ),
-    [excludedStatuses, pendingUsersToAdd, errorMessage],
+    [excludedStatuses],
   );
 
   const callUpdateRelationships =
@@ -85,10 +78,11 @@
       throw e;
     }
   }, [
+    setErrorMessage,
     callUpdateRelationships,
-    popModal,
     relationshipAction,
     pendingUsersToAdd,
+    popModal,
   ]);
 
   const confirmSelection = React.useCallback(
diff --git a/web/settings/relationship/add-users-list-provider.react.js b/web/settings/relationship/add-users-list-provider.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/relationship/add-users-list-provider.react.js
@@ -0,0 +1,63 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import type { SetState } from 'lib/types/hook-types.js';
+import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+export type AddUsersListContextType = {
+  +pendingUsersToAdd: $ReadOnlyMap<string, GlobalAccountUserInfo>,
+  +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, GlobalAccountUserInfo>>,
+  +previouslySelectedUsers: $ReadOnlyMap<string, GlobalAccountUserInfo>,
+  +setPreviouslySelectedUsers: SetState<
+    $ReadOnlyMap<string, GlobalAccountUserInfo>,
+  >,
+  +errorMessage: string,
+  +setErrorMessage: SetState<string>,
+};
+
+const AddUsersListContext = React.createContext<?AddUsersListContextType>();
+
+type Props = {
+  +children: React.Node,
+};
+
+function AddUsersListProvider(props: Props): React.Node {
+  const { children } = props;
+
+  const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
+    $ReadOnlyMap<string, GlobalAccountUserInfo>,
+  >(new Map());
+  const [previouslySelectedUsers, setPreviouslySelectedUsers] = React.useState<
+    $ReadOnlyMap<string, GlobalAccountUserInfo>,
+  >(new Map());
+  const [errorMessage, setErrorMessage] = React.useState<string>('');
+
+  const contextValue = React.useMemo(
+    () => ({
+      pendingUsersToAdd,
+      setPendingUsersToAdd,
+      previouslySelectedUsers,
+      setPreviouslySelectedUsers,
+      errorMessage,
+      setErrorMessage,
+    }),
+    [pendingUsersToAdd, previouslySelectedUsers, errorMessage],
+  );
+
+  return (
+    <AddUsersListContext.Provider value={contextValue}>
+      {children}
+    </AddUsersListContext.Provider>
+  );
+}
+
+function useAddUsersListContext(): AddUsersListContextType {
+  const addUsersListContext = React.useContext(AddUsersListContext);
+
+  invariant(addUsersListContext, 'addUsersListContext should be set');
+  return addUsersListContext;
+}
+
+export { AddUsersListProvider, useAddUsersListContext };
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
@@ -3,11 +3,11 @@
 import * as React from 'react';
 
 import { useSortedENSResolvedUsers } from 'lib/hooks/ens-cache.js';
-import type { SetState } from 'lib/types/hook-types.js';
 import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
 import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
 
 import AddUsersListItem from './add-users-list-item.react.js';
+import { useAddUsersListContext } from './add-users-list-provider.react.js';
 import css from './add-users-list.css';
 import { useUserRelationshipUserInfos } from './add-users-utils.js';
 import Button from '../../components/button.react.js';
@@ -15,26 +15,21 @@
 type Props = {
   +searchText: string,
   +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
-  +pendingUsersToAdd: $ReadOnlyMap<string, GlobalAccountUserInfo>,
-  +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, GlobalAccountUserInfo>>,
-  +errorMessage: string,
 };
 
 function AddUsersList(props: Props): React.Node {
+  const { searchText, excludedStatuses = new Set() } = props;
+
   const {
-    searchText,
-    excludedStatuses = new Set(),
     pendingUsersToAdd,
     setPendingUsersToAdd,
+    previouslySelectedUsers,
+    setPreviouslySelectedUsers,
     errorMessage,
-  } = props;
+  } = useAddUsersListContext();
 
   const searchModeActive = searchText.length > 0;
 
-  const [previouslySelectedUsers, setPreviouslySelectedUsers] = React.useState<
-    $ReadOnlyMap<string, GlobalAccountUserInfo>,
-  >(new Map());
-
   React.useEffect(() => {
     setPreviouslySelectedUsers(pendingUsersToAdd);
 
@@ -46,7 +41,6 @@
     useUserRelationshipUserInfos({
       searchText,
       excludedStatuses,
-      previouslySelectedUsers,
     });
 
   const previouslySelectedUsersList = React.useMemo(
diff --git a/web/settings/relationship/add-users-utils.js b/web/settings/relationship/add-users-utils.js
--- a/web/settings/relationship/add-users-utils.js
+++ b/web/settings/relationship/add-users-utils.js
@@ -12,12 +12,12 @@
 } from 'lib/types/user-types.js';
 import { values } from 'lib/utils/objects.js';
 
+import { useAddUsersListContext } from './add-users-list-provider.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 
 type UseUserRelationshipUserInfosParams = {
   +searchText: string,
   +excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
-  +previouslySelectedUsers: $ReadOnlyMap<string, GlobalAccountUserInfo>,
 };
 
 function useUserRelationshipUserInfos(
@@ -30,7 +30,9 @@
     GlobalAccountUserInfo | AccountUserInfo,
   >,
 } {
-  const { searchText, excludedStatuses, previouslySelectedUsers } = params;
+  const { searchText, excludedStatuses } = params;
+
+  const { previouslySelectedUsers } = useAddUsersListContext();
 
   const viewerID = useSelector(state => state.currentUserInfo?.id);
   const userInfos = useSelector(state => state.userStore.userInfos);
diff --git a/web/settings/relationship/block-users-modal.react.js b/web/settings/relationship/block-users-modal.react.js
--- a/web/settings/relationship/block-users-modal.react.js
+++ b/web/settings/relationship/block-users-modal.react.js
@@ -10,6 +10,7 @@
 } from 'lib/types/relationship-types.js';
 
 import AddUsersListModal from './add-users-list-modal.react.js';
+import { AddUsersListProvider } from './add-users-list-provider.react.js';
 import { buttonThemes } from '../../components/button.react.js';
 
 const excludedStatuses = new Set([
@@ -18,22 +19,32 @@
 ]);
 
 function BlockUsersModal(): React.Node {
-  const buttonContent = (
-    <div>
-      <FontAwesomeIcon icon={faUserShield} />
-      {' Block users'}
-    </div>
+  const buttonContent = React.useMemo(
+    () => (
+      <div>
+        <FontAwesomeIcon icon={faUserShield} />
+        {' Block users'}
+      </div>
+    ),
+    [],
   );
 
-  return (
-    <AddUsersListModal
-      name="Block users"
-      excludedStatuses={excludedStatuses}
-      confirmButtonContent={buttonContent}
-      confirmButtonColor={buttonThemes.danger}
-      relationshipAction={relationshipActions.BLOCK}
-    />
+  const blockUsersModal = React.useMemo(
+    () => (
+      <AddUsersListProvider>
+        <AddUsersListModal
+          name="Block users"
+          excludedStatuses={excludedStatuses}
+          confirmButtonContent={buttonContent}
+          confirmButtonColor={buttonThemes.danger}
+          relationshipAction={relationshipActions.BLOCK}
+        />
+      </AddUsersListProvider>
+    ),
+    [buttonContent],
   );
+
+  return blockUsersModal;
 }
 
 export default BlockUsersModal;