Lag when there are a lot of messages

Issue Description

Noticeable lag when there are a lot of messages and multiple sender. is this to be expected or am i doing something wrong?

Steps to Reproduce / Code Snippets

send a lot of message from multiple sender

Expected Results

Minimum lag

Additional Information

• Nodejs version: 6.11.0
• React version: 16.0.0-alpha.6
• React Native version: 0.44.2
• react-native-gifted-chat version: 0.4.3
• Platform(s) (iOS, Android, or both?): Android

code

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import SocketIOClient from 'socket.io-client';
import { GiftedChat } from 'react-native-gifted-chat'

export default class rn_ws_app extends Component {

    constructor(props){
        super(props);

        this.state = {
            messages:[]
        }

         this.onReceiveMessage = this.onReceiveMessage.bind(this);

        this.socket = SocketIOClient('http://192.168.1.137:3000');
        this.socket.on('message', this.onReceiveMessage);
    }

    onReceiveMessage(message) {
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, [message]),
        }))
    }

    onSend(messages = []) {
        this.socket.emit('message', messages[0]);
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, messages)
        }))
    }

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('rn_ws_app', () => rn_ws_app);

[ruk91]

I had the same issue and I was able to fix by commenting the line value={this.props.text} in Composer.js

[rzdev]

Found 2 ways to speed things up:

1. this https://github.com/FaridSafi/react-native-gifted-chat/issues/840 fix the issue with typing lag
2. on GiftedChat.js, line 88 change from

return inverted ? messages.concat(currentMessages) : currentMessages.concat(messages);

to

return inverted ? [...messages,...currentMessages] : currentMessages.concat(messages);