diff --git a/lib/shared/reaction-utils.js b/lib/shared/reaction-utils.js
index df97cc007..5f8e64c96 100644
--- a/lib/shared/reaction-utils.js
+++ b/lib/shared/reaction-utils.js
@@ -1,125 +1,127 @@
 // @flow
 
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
 
 import { relationshipBlockedInEitherDirection } from './relationship-utils.js';
 import { threadHasPermission } from './thread-utils.js';
 import { stringForUserExplicit } from './user-utils.js';
 import { useENSNames } from '../hooks/ens-cache.js';
 import type { ReactionInfo } from '../selectors/chat-selectors.js';
 import type {
   RobotextMessageInfo,
   ComposableMessageInfo,
 } from '../types/message-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { type ThreadInfo } from '../types/thread-types.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 function stringForReactionList(reactions: ReactionInfo): string {
   const reactionText = [];
 
   for (const reaction in reactions) {
     const reactionInfo = reactions[reaction];
 
     reactionText.push(reaction);
     const { length: numberOfReacts } = reactionInfo.users;
     if (numberOfReacts <= 1) {
       continue;
     }
     reactionText.push(numberOfReacts > 9 ? '9+' : numberOfReacts.toString());
   }
 
   return reactionText.join(' ');
 }
 
-function getViewerAlreadySelectedMessageReactions(
+function useViewerAlreadySelectedMessageReactions(
   reactions: ReactionInfo,
 ): $ReadOnlyArray<string> {
-  const alreadySelectedEmojis = [];
+  return React.useMemo(() => {
+    const alreadySelectedEmojis = [];
 
-  for (const reaction in reactions) {
-    const reactionInfo = reactions[reaction];
+    for (const reaction in reactions) {
+      const reactionInfo = reactions[reaction];
 
-    if (reactionInfo.viewerReacted) {
-      alreadySelectedEmojis.push(reaction);
+      if (reactionInfo.viewerReacted) {
+        alreadySelectedEmojis.push(reaction);
+      }
     }
-  }
 
-  return alreadySelectedEmojis;
+    return alreadySelectedEmojis;
+  }, [reactions]);
 }
 
 type MessageReactionListInfo = {
   +id: string,
   +isViewer: boolean,
   +reaction: string,
   +username: string,
 };
 
 function useMessageReactionsList(
   reactions: ReactionInfo,
 ): $ReadOnlyArray<MessageReactionListInfo> {
   const withoutENSNames = React.useMemo(() => {
     const result = [];
 
     for (const reaction in reactions) {
       const reactionInfo = reactions[reaction];
 
       reactionInfo.users.forEach(user => {
         result.push({
           ...user,
           username: stringForUserExplicit(user),
           reaction,
         });
       });
     }
 
     const sortByNumReactions = (reactionInfo: MessageReactionListInfo) => {
       const numOfReactions = reactions[reactionInfo.reaction].users.length;
       return numOfReactions ? -numOfReactions : 0;
     };
 
     return _sortBy(
       ([sortByNumReactions, 'username']: $ReadOnlyArray<
         ((reactionInfo: MessageReactionListInfo) => mixed) | string,
       >),
     )(result);
   }, [reactions]);
   return useENSNames<MessageReactionListInfo>(withoutENSNames);
 }
 
 function useCanCreateReactionFromMessage(
   threadInfo: ThreadInfo,
   targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const targetMessageCreatorRelationship = useSelector(
     state =>
       state.userStore.userInfos[targetMessageInfo.creator.id]
         ?.relationshipStatus,
   );
 
   if (
     !targetMessageInfo.id ||
     threadInfo.sourceMessageID === targetMessageInfo.id
   ) {
     return false;
   }
 
   const creatorRelationshipHasBlock =
     targetMessageCreatorRelationship &&
     relationshipBlockedInEitherDirection(targetMessageCreatorRelationship);
 
   const hasPermission = threadHasPermission(
     threadInfo,
     threadPermissions.REACT_TO_MESSAGE,
   );
 
   return hasPermission && !creatorRelationshipHasBlock;
 }
 
 export {
   stringForReactionList,
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useMessageReactionsList,
   useCanCreateReactionFromMessage,
 };
diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js
index 10d3461eb..b303feba2 100644
--- a/native/chat/multimedia-message-tooltip-button.react.js
+++ b/native/chat/multimedia-message-tooltip-button.react.js
@@ -1,188 +1,186 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 import {
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerMultimediaMessage } from './inner-multimedia-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, Extrapolate, interpolateNode } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function noop() {}
 
 type Props = {
   +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>,
   +route: TooltipRoute<'MultimediaMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function MultimediaMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const innerMultimediaMessage = React.useMemo(
     () => (
       <InnerMultimediaMessage
         item={item}
         verticalBounds={verticalBounds}
         clickable={false}
         setClickable={noop}
         onPress={navigation.goBackOnce}
         onLongPress={navigation.goBackOnce}
       />
     ),
     [item, navigation.goBackOnce, verticalBounds],
   );
 
   const { messageInfo, threadInfo, reactions } = item;
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     emoji => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(
-    () => getViewerAlreadySelectedMessageReactions(item.reactions),
-    [item.reactions],
-  );
+  const alreadySelectedEmojis =
+    useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         {innerMultimediaMessage}
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
       />
     </>
   );
 }
 
 export default MultimediaMessageTooltipButton;
diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js
index 00d409c0a..3e63c1aac 100644
--- a/native/chat/robotext-message-tooltip-button.react.js
+++ b/native/chat/robotext-message-tooltip-button.react.js
@@ -1,170 +1,168 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 import {
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerRobotextMessage } from './inner-robotext-message.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { Timestamp } from './timestamp.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>,
   +route: TooltipRoute<'RobotextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function RobotextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning="center"
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     emoji => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(
-    () => getViewerAlreadySelectedMessageReactions(item.reactions),
-    [item.reactions],
-  );
+  const alreadySelectedEmojis =
+    useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <Timestamp time={item.messageInfo.time} display="modal" />
         </Animated.View>
         {reactionSelectionPopover}
         <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
       />
     </>
   );
 }
 
 export default RobotextMessageTooltipButton;
diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js
index 45996265b..37cbfd496 100644
--- a/native/chat/text-message-tooltip-button.react.js
+++ b/native/chat/text-message-tooltip-button.react.js
@@ -1,194 +1,192 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 import {
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerTextMessage } from './inner-text-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import { MessageListContextProvider } from './message-list-types.js';
 import { MessagePressResponderContext } from './message-press-responder-context.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'TextMessageTooltipModal'>,
   +route: TooltipRoute<'TextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function TextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const messagePressResponderContext = React.useMemo(
     () => ({
       onPressMessage: navigation.goBackOnce,
     }),
     [navigation.goBackOnce],
   );
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     emoji => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(
-    () => getViewerAlreadySelectedMessageReactions(item.reactions),
-    [item.reactions],
-  );
+  const alreadySelectedEmojis =
+    useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={messageContainerStyle}>
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         <MessagePressResponderContext.Provider
           value={messagePressResponderContext}
         >
           <InnerTextMessage
             item={item}
             onPress={navigation.goBackOnce}
             threadColorOverride={threadColorOverride}
             isThreadColorDarkOverride={isThreadColorDarkOverride}
           />
         </MessagePressResponderContext.Provider>
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
       />
     </MessageListContextProvider>
   );
 }
 
 export default TextMessageTooltipButton;