fix: useeffect re-render when text change in useMessageDetailsForState

Author: khushal87

package/src/components/MessageInput/InputButtons.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import {
@@ -64,14 +64,18 @@ export const InputButtonsWithContext = <
     },
   } = useTheme();
 
+  const handleShowMoreOptions = useCallback(() => {
+    setShowMoreOptions(true);
+  }, [setShowMoreOptions]);
+
   const ownCapabilities = useOwnCapabilitiesContext();
 
   if (giphyActive) {
     return null;
   }
 
   return !showMoreOptions && (hasCameraPicker || hasImagePicker || hasFilePicker) && hasCommands ? (
-    <MoreOptionsButton handleOnPress={() => setShowMoreOptions(true)} />
+    <MoreOptionsButton handleOnPress={handleShowMoreOptions} />
   ) : (
     <>
       {(hasCameraPicker || hasImagePicker || hasFilePicker) && ownCapabilities.uploadFile && (

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { GestureResponderEvent } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { TouchableOpacity } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -22,20 +22,22 @@ export const useMessageDetailsForState = <
   const [imageUploads, setImageUploads] = useState<ImageUpload[]>([]);
   const [mentionedUsers, setMentionedUsers] = useState<string[]>([]);
   const [numberOfUploads, setNumberOfUploads] = useState(0);
-  const [showMoreOptions, setShowMoreOptions] = useState(true);
 
   const initialTextValue = initialValue || '';
   const [text, setText] = useState(initialTextValue);
 
+  const isEqualToInitialText = text === initialTextValue;
+
+  const [showMoreOptions, setShowMoreOptions] = useState(true);
+
   useEffect(() => {
-    if (text !== initialTextValue) {
+    if (!isEqualToInitialText) {
       setShowMoreOptions(false);
     }
     if (fileUploads.length || imageUploads.length) {
       setShowMoreOptions(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [text, imageUploads.length, fileUploads.length]);
+  }, [isEqualToInitialText, imageUploads.length, fileUploads.length]);
 
   const messageValue = message ? stringifyMessage(message) : '';