Useless rerender when typing: is it solved?

[ralcant]

Issue Description

I've looked at https://github.com/FaridSafi/react-native-gifted-chat/issues/2370 which supposedly fixed https://github.com/FaridSafi/react-native-gifted-chat/issues/2366, but right now I'm on latest version of this library (2.4.0) and still experiencing (useless) re renders when typing. This hinders performance as my renderMessageText component is a bit slow on its own (so should only be rendered once).

Has this problem been solved, and if so is there a prop I have to send to avoid this behavior? Saw some issues referencing an actionSheet, tho I don't know how to use that (or if that solves the issue).

Steps to Reproduce / Code Snippets

      <View style={styles.container}>
        <GiftedChat
          messages={messages}
          onSend={(newMessages) => onSend(newMessages)}
          renderMessageText={(message) => {
            let { currentMessage } = message;
            console.log(currentMessage); // I keep seeing this logged when typing
            return (
              <MessageViewer nestedScrollEnabled message={currentMessage} />
            );
          }}
          renderBubble={renderBubble}
          renderInputToolbar={renderInputToolbar}
          minInputToolbarHeight={70}
          placeholder="Escribe un mensaje"
          isTyping={isSending}
          textInputProps={{ keyboardAppearance: "dark", autoFocus: true }}
        />
      </View>

Expected Results

Previous messages should not rerender when one is typing a new message

Additional Information

• Nodejs version: 19.7.0
• React version: 18.2.0
• React Native version: 0.71.8
• react-native-gifted-chat version: ^2.4.0
• Platform(s) (iOS, Android, or both?): Android (have not tested on iOS)
• TypeScript version: N/A (using JS)

[fukemy]

hmm I think some wrong, as I know, on every text changed, GiftedChat re-render it's self by this function setText

It's using for check when either user need to re-render InputToolbar, 'Send button`, ... etc. For better performance, you can use redux to control the text and dispatch the re-render with your condition, like this:

 if (text.length) = 0 `renderEmptyView(...)` else `renderSendButton(...)`

For your question, I have the mindset like this:

• GIftedChat(re-rendered)
  • MessageContainer(re-render due to GiftedChat re-render)
    • Message(not-rendered as componentDidUpdate condition)
    • Bubble(not re-rendered by Message not re-rendered)
      • MessageText( Not re-rendered too)

The method renderMessageText is function inside Bubble class, you can find them here. I think it's will not called again due to <Bubble/> not re-render. So please check in your code if you have something like:

shouldUpdateMessage() => {
   return true
}

[siiiido]

I have the same problem. I also use my own Message and MessageText components. Do you solve this problem?