javascript - React Native App hanging while appending to array/Flatlist

Question

So I have a app where I loades messages from my Server/Database. Now I have a big problem which is not really great for the users:

--> When I for loop the messages payload from the backend my whole App is hanging and I can't click anywhere else to e.g. go back and so on.

This is my for loop:

const handleMessagesPayload = (messages, new_page_number) => {
  if (messages != null && messages != "undefined" && messages != "None"){
    setPageNumber(new_page_number)
    console.log(messages)
    for (var i = 0; i < messages.length; i++) {
      appendChatMessage(messages[i], false)
    };
  }
}

appendChatMessage function:

const appendChatMessage = (data, isNewMessage) => {

  var msg = data.message
  var timestamp = data.natural_timestamp
  var user_id = data.user_id
  var username = data.username
  var message_id = data.message_id


  logData(msg, timestamp, user_id, username, isNewMessage, message_id)
}

//add the new Messages to array
const logData = (msg, timestamp, user_id, message_username, isNewMessage, message_id) => {

  const newMessage = {"message": msg, "username": message_username, "timestamp": timestamp, "message_id": message_id}

  newChatMessage.push(newMessage) //newChatMessage is the array I was talking about
};

标签： javascriptreactjsreact-native

Answer 1

Do you have any useStates()? This might be the problem if you have any of them because they are very slow.