perf: properly use selected state values

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -23,7 +23,7 @@ import { useMessageReadData } from './hooks/useMessageReadData';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
-import { closeOverlay, openOverlay, useOverlayController } from '../../contexts';
+import { closeOverlay, openOverlay, useIsOverlayActive } from '../../contexts';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -694,10 +694,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   };
 
   const frozenMessage = useRef(message);
-  const { id, closing } = useOverlayController();
+  const { active, closing } = useIsOverlayActive(message.id);
 
-  // TODO: refactor
-  const active = id === message.id;
+  console.log('MSGID: ', message.id);
 
   const messageContext = useCreateMessageContext({
     actionsEnabled,

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { BackHandler, Dimensions, StyleSheet, useWindowDimensions, View } from 'react-native';
 
@@ -196,6 +196,18 @@ export const useOverlayController = () => {
   return useStateStore(overlayStore, selector);
 };
 
+const noOpObject = { active: false, closing: false };
+
+export const useIsOverlayActive = (messageId: string) => {
+  const messageOverlaySelector = useCallback(
+    (nextState: OverlayState) =>
+      nextState.id === messageId ? { active: true, closing: nextState.closing } : noOpObject,
+    [messageId],
+  );
+
+  return useStateStore(overlayStore, messageOverlaySelector);
+};
+
 const OverlayHostLayer = () => {
   const { messageH, topH, bottomH, id, closing } = useOverlayController();
   const insets = useSafeAreaInsets();