fix: add back react memo

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -11,7 +11,10 @@ import {
 
 import { CustomDataManagerState, TextComposerState } from 'stream-chat';
 
-import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
+import {
+  ChannelContextValue,
+  useChannelContext,
+} from '../../contexts/channelContext/ChannelContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
   MessageInputContextValue,
@@ -25,16 +28,19 @@ import {
 
 import { useStateStore } from '../../hooks/useStateStore';
 
-type AutoCompleteInputProps = TextInputProps &
-  Partial<Pick<MessageInputContextValue, 'setInputBoxRef'>> &
-  Partial<Pick<TranslationContextValue, 't'>> & {
+type AutoCompleteInputPropsWithContext = TextInputProps &
+  Pick<ChannelContextValue, 'channel'> &
+  Pick<MessageInputContextValue, 'setInputBoxRef'> &
+  Pick<TranslationContextValue, 't'> & {
     /**
      * This is currently passed in from MessageInput to avoid rerenders
      * that would happen if we put this in the MessageInputContext
      */
     cooldownActive?: boolean;
   };
 
+type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
+
 const textComposerStateSelector = (state: TextComposerState) => ({
   text: state.text,
 });
@@ -45,20 +51,14 @@ const customComposerDataSelector = (state: CustomDataManagerState) => ({
 
 const MAX_NUMBER_OF_LINES = 5;
 
-export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
-  const { cooldownActive = false, setInputBoxRef: propSetInputBoxRef, t: propT, ...rest } = props;
+const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
+  const { channel, cooldownActive = false, setInputBoxRef, t, ...rest } = props;
   const [localText, setLocalText] = useState('');
   const [textHeight, setTextHeight] = useState(0);
   const messageComposer = useMessageComposer();
   const { customDataManager, textComposer } = messageComposer;
   const { text } = useStateStore(textComposer.state, textComposerStateSelector);
   const { command } = useStateStore(customDataManager.state, customComposerDataSelector);
-  const { channel } = useChannelContext();
-  const { setInputBoxRef: contextSetInputBoxRef } = useMessageInputContext();
-  const { t: contextT } = useTranslationContext();
-
-  const setInputBoxRef = propSetInputBoxRef || contextSetInputBoxRef;
-  const t = propT || contextT;
 
   const maxMessageLength = useMemo(() => {
     return channel.getConfig()?.max_message_length;
@@ -142,6 +142,53 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
   );
 };
 
+const areEqual = (
+  prevProps: AutoCompleteInputPropsWithContext,
+  nextProps: AutoCompleteInputPropsWithContext,
+) => {
+  const { channel: prevChannel, cooldownActive: prevCooldownActive, t: prevT } = prevProps;
+  const { channel: nextChannel, cooldownActive: nextCooldownActive, t: nextT } = nextProps;
+
+  const tEqual = prevT === nextT;
+  if (!tEqual) {
+    return false;
+  }
+
+  const cooldownActiveEqual = prevCooldownActive === nextCooldownActive;
+  if (!cooldownActiveEqual) {
+    return false;
+  }
+
+  const channelEqual = prevChannel.cid === nextChannel.cid;
+  if (!channelEqual) {
+    return false;
+  }
+
+  return true;
+};
+
+const MemoizedAutoCompleteInput = React.memo(
+  AutoCompleteInputWithContext,
+  areEqual,
+) as typeof AutoCompleteInputWithContext;
+
+export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
+  const { setInputBoxRef } = useMessageInputContext();
+  const { t } = useTranslationContext();
+  const { channel } = useChannelContext();
+
+  return (
+    <MemoizedAutoCompleteInput
+      {...{
+        channel,
+        setInputBoxRef,
+        t,
+      }}
+      {...props}
+    />
+  );
+};
+
 const styles = StyleSheet.create({
   inputBox: {
     flex: 1,

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -32,6 +32,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
     </View>
   );
 };
+
 export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ queryText }) => {
   const {
     theme: {
@@ -54,7 +55,7 @@ export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ query
   );
 };
 
-export const AutoCompleteSuggestionHeader = ({
+const UnMemoizedAutoCompleteSuggestionHeader = ({
   queryText,
   triggerType,
 }: AutoCompleteSuggestionHeaderProps) => {
@@ -67,6 +68,35 @@ export const AutoCompleteSuggestionHeader = ({
   }
 };
 
+const areEqual = (
+  prevProps: AutoCompleteSuggestionHeaderProps,
+  nextProps: AutoCompleteSuggestionHeaderProps,
+) => {
+  const { queryText: prevQueryText, triggerType: prevType } = prevProps;
+  const { queryText: nextQueryText, triggerType: nextType } = nextProps;
+
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) {
+    return false;
+  }
+
+  const valueEqual = prevQueryText === nextQueryText;
+  if (!valueEqual) {
+    return false;
+  }
+
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionHeader = React.memo(
+  UnMemoizedAutoCompleteSuggestionHeader,
+  areEqual,
+);
+
+export const AutoCompleteSuggestionHeader = (props: AutoCompleteSuggestionHeaderProps) => (
+  <MemoizedAutoCompleteSuggestionHeader {...props} />
+);
+
 AutoCompleteSuggestionHeader.displayName =
   'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';
 

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -111,7 +111,7 @@ const SuggestionItem = ({
   }
 };
 
-export const AutoCompleteSuggestionItem = ({
+const UnMemoizedAutoCompleteSuggestionItem = ({
   itemProps,
   triggerType,
 }: AutoCompleteSuggestionItemProps) => {
@@ -140,6 +140,32 @@ export const AutoCompleteSuggestionItem = ({
   );
 };
 
+const areEqual = (
+  prevProps: AutoCompleteSuggestionItemProps,
+  nextProps: AutoCompleteSuggestionItemProps,
+) => {
+  const { itemProps: prevItemProps, triggerType: prevType } = prevProps;
+  const { itemProps: nextItemProps, triggerType: nextType } = nextProps;
+  const itemPropsEqual = prevItemProps === nextItemProps;
+  if (!itemPropsEqual) {
+    return false;
+  }
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) {
+    return false;
+  }
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionItem = React.memo(
+  UnMemoizedAutoCompleteSuggestionItem,
+  areEqual,
+);
+
+export const AutoCompleteSuggestionItem = (props: AutoCompleteSuggestionItemProps) => (
+  <MemoizedAutoCompleteSuggestionItem {...props} />
+);
+
 const styles = StyleSheet.create({
   args: {
     fontSize: 14,

package/src/components/Poll/CreatePollContent.tsx

@@ -83,7 +83,7 @@ export const CreatePollContent = () => {
       };
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [createPollOptionHeight, options.length]);
+  }, [createPollOptionHeight, options]);
 
   const onBackPressHandler = useCallback(() => {
     pollComposer.initState();