Send Button becomes laggy / unresponsive with more messages due to slower rerendering triggered by text input change

[hassant4]

trafficstars

Issue Description

The Send Button becomes unresponsive if you have 20 messages. But in reality, the issue starts with just 5 messages.

It seems like the Send component rerenders multiple times for each input value change. And this rerendering becomes slower as you add more messages. EDIT: I'm not sure if its the rerendering of this specific component which is slower, or perhaps the rerendering of another component as part of a bigger rerendering process

The issue is, until the component has rerendered for every state of the input text, the send button is not able to be pressed, so this makes it unresponsive as each rerender takes longer with more messages in history.

Please see the 1 minute explainer video for more detail attached or here on Loom

SOUND ON

https://user-images.githubusercontent.com/29988067/228359276-8cad0144-1022-405d-ae9f-2a5aeac969a7.mp4

Does anyone have a solution/hack?

Expected Results

The Send button should not be lagging and unresponsive like this - why are the rerenders so slow for such a small (20) amount of messages?

Additional Information

• Expo: "~48.0.4",
• React version: "react": "18.2.0",
• React Native "react-native": "0.71.3",
• react-native-gifted-chat version: "^1.1.1",
• Platform(s) (iOS, Android, or both?): iOS

Steps to Reproduce / Code Snippets

1. Add console.log('running Send for: ${text}') to Send component in lib/Send.js (replace with backticks)
2. Use the example in ReadMe but add more messages in history

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function ChatSimple() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages(Array(20/.fill(
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      }
    ).map((value, index) => ({...value, _id: index})))
  }, [])


  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, [])

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  )
}

[JoniVR]

I can confirm here this is an issue. Not sure if it's due to rerendering or something else but after about 10 messages the send button becomes almost unusable.

[fukemy]

it's really big problem

[hassant4]

@fukemy @JoniVR Please see #2370 , it solves this issue by patching

[fukemy]

thanks @hassant4 , I will remove this context due to useless variable in my project, I dont want to update locale programmatically, then I will use global actionsheet