fix: optimize send button performance

Author: khushal87

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -9,7 +9,7 @@ export type MoreOptionsButtonProps = {
   handleOnPress?: () => void;
 };
 
-export const UnMemoizedMoreOptionsButton = (props: MoreOptionsButtonProps) => {
+export const MoreOptionsButton = (props: MoreOptionsButtonProps) => {
   const { handleOnPress } = props;
 
   const {
@@ -31,6 +31,4 @@ export const UnMemoizedMoreOptionsButton = (props: MoreOptionsButtonProps) => {
   );
 };
 
-export const MoreOptionsButton = React.memo(UnMemoizedMoreOptionsButton);
-
 MoreOptionsButton.displayName = 'MoreOptionsButton{messageInput}';

package/src/components/MessageInput/SendButton.tsx

@@ -15,7 +15,7 @@ import { Search } from '../../icons/Search';
 import { SendRight } from '../../icons/SendRight';
 import { SendUp } from '../../icons/SendUp';
 
-type SendButtonPropsWithContext = Pick<MessageInputContextValue, 'sendMessage'> & {
+export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
   /** Disables the button */
   disabled: boolean;
 };
@@ -24,8 +24,10 @@ const customComposerDataSelector = (state: CustomDataManagerState) => ({
   command: state.custom.command,
 });
 
-export const SendButtonWithContext = (props: SendButtonPropsWithContext) => {
-  const { disabled = false, sendMessage } = props;
+export const SendButton = (props: SendButtonProps) => {
+  const { disabled = false, sendMessage: propsSendMessage } = props;
+  const { sendMessage: sendMessageFromContext } = useMessageInputContext();
+  const sendMessage = propsSendMessage || sendMessageFromContext;
   const messageComposer = useMessageComposer();
   const { customDataManager } = messageComposer;
   const { command } = useStateStore(customDataManager.state, customComposerDataSelector);
@@ -61,43 +63,4 @@ export const SendButtonWithContext = (props: SendButtonPropsWithContext) => {
   );
 };
 
-const areEqual = (prevProps: SendButtonPropsWithContext, nextProps: SendButtonPropsWithContext) => {
-  const { disabled: prevDisabled, sendMessage: prevSendMessage } = prevProps;
-  const { disabled: nextDisabled, sendMessage: nextSendMessage } = nextProps;
-
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) {
-    return false;
-  }
-
-  const sendMessageEqual = prevSendMessage === nextSendMessage;
-  if (!sendMessageEqual) {
-    return false;
-  }
-
-  return true;
-};
-
-const MemoizedSendButton = React.memo(
-  SendButtonWithContext,
-  areEqual,
-) as typeof SendButtonWithContext;
-
-export type SendButtonProps = Partial<SendButtonPropsWithContext>;
-
-/**
- * UI Component for send button in MessageInput component.
- */
-export const SendButton = (props: SendButtonProps) => {
-  const { sendMessage } = useMessageInputContext();
-
-  return (
-    <MemoizedSendButton
-      {...{ sendMessage }}
-      {...props}
-      {...{ disabled: props.disabled || false }}
-    />
-  );
-};
-
 SendButton.displayName = 'SendButton{messageInput}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -10,7 +10,7 @@ import { useTranslationContext } from '../../../../contexts/translationContext/T
 import { Mic } from '../../../../icons/Mic';
 import { AudioRecordingReturnType, NativeHandlers } from '../../../../native';
 
-type AudioRecordingButtonPropsWithContext = Pick<
+type AudioRecordingButtonProps = Pick<
   MessageInputContextValue,
   'asyncMessagesMinimumPressDuration'
 > & {
@@ -40,16 +40,24 @@ type AudioRecordingButtonPropsWithContext = Pick<
   startVoiceRecording?: () => Promise<void>;
 };
 
-export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonPropsWithContext) => {
+/**
+ * Component to display the mic button on the Message Input.
+ */
+export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
   const {
-    asyncMessagesMinimumPressDuration,
+    asyncMessagesMinimumPressDuration: propAsyncMessagesMinimumPressDuration,
     buttonSize,
     handleLongPress,
     handlePress,
     permissionsGranted,
     recording,
     startVoiceRecording,
   } = props;
+  const { asyncMessagesMinimumPressDuration: contextAsyncMessagesMinimumPressDuration } =
+    useMessageInputContext();
+
+  const asyncMessagesMinimumPressDuration =
+    propAsyncMessagesMinimumPressDuration || contextAsyncMessagesMinimumPressDuration;
 
   const {
     theme: {
@@ -116,51 +124,6 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   );
 };
 
-const areEqual = (
-  prevProps: AudioRecordingButtonPropsWithContext,
-  nextProps: AudioRecordingButtonPropsWithContext,
-) => {
-  const {
-    asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
-    recording: prevRecording,
-  } = prevProps;
-  const {
-    asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
-    recording: nextRecording,
-  } = nextProps;
-
-  const asyncMessagesMinimumPressDurationEqual =
-    prevAsyncMessagesMinimumPressDuration === nextAsyncMessagesMinimumPressDuration;
-  if (!asyncMessagesMinimumPressDurationEqual) {
-    return false;
-  }
-
-  const recordingEqual = prevRecording === nextRecording;
-  if (!recordingEqual) {
-    return false;
-  }
-
-  return true;
-};
-
-const MemoizedAudioRecordingButton = React.memo(
-  AudioRecordingButtonWithContext,
-  areEqual,
-) as typeof AudioRecordingButtonWithContext;
-
-export type AudioRecordingButtonProps = Partial<AudioRecordingButtonPropsWithContext> & {
-  recording: AudioRecordingReturnType;
-};
-
-/**
- * Component to display the mic button on the Message Input.
- */
-export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
-  const { asyncMessagesMinimumPressDuration } = useMessageInputContext();
-
-  return <MemoizedAudioRecordingButton {...{ asyncMessagesMinimumPressDuration }} {...props} />;
-};
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',