Sending messages takes too long on React Native chat app

Question

I am developing a React Native app which has a chat as one of its main functions. I use a .useState([]) hook to store the chat's messages and FlatList to render the messages. When I am sending or receiving a message I do setMessages[...messages, {newMessageData}]. But after a certain amount of messages have been stored in the chat, it takes a while just to press send to a message (excluding server handling) until the message loads shows in the FlatList. How could I improve the performance so that it would function well enough for a good live chat?

 const [messages, setMessages] = React.useState([{datetime: new Date(), content: "", sender: "", num: "amfu", new:[]}])

const addMessage = (sender, content, id, hasImage, image) => {
    let data = {}
  
    if(messages.length >= 0){
        data = {"sender": sender, "content": content, "num": messages.length, 
        "read":true, "datetime": new Date(), "id": id, "reactions": {"user": "", "other": "", "has":false}, "hasImage": hasImage,
        "image": hasImage ? image : null}
    } else {

    }

    setMessages([data, ...messages])
    setText("")
  }


<FlatList 
      data={messages}   
      renderItem={handleM}
      keyExtractor={(item) => item.num} 
      inverted={true} 
      style={{maxHeight: "90%", height: "auto", paddingTop: 100,}}
      contentContainerStyle={{ flexGrow: 1 }}  
      ref={listRef}
      scrollEnabled={isLongPressed == ""} 
    />

It has to do with the way you are storing your messages, you need to share the structure and the body which you are sending when posting the message. — Vibhor
– Vibhor, Commented Dec 10, 2023 at 7:00

Ajay Parambath · Accepted Answer · 2023-12-10 08:54:25Z

0

When utilizing setState in React Native, each update triggers a complete screen re-render. In scenarios where extensive chat data is stored in a list, reloading this data with every re-render can become inefficient, especially as the dataset grows. While traditional solutions involve separating components to limit the scope of re-renders, the challenge persists with large lists.

To address this, I recommend incorporating the useMemo hook. This hook proves valuable when dealing with dynamic list data, allowing you to cache calculations between re-renders. Ensure that you encapsulate the relevant logic within a useMemo call at the highest level of your component. This optimization can significantly enhance performance, particularly as the size of the list increases.

React native - useMemo

answered Dec 10, 2023 at 8:54

Ajay Parambath

877 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sending messages takes too long on React Native chat app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related