Lag Occurring when many new items are added to Array.

[jjwallace]

I am rendering a vertical list of items. I have a steady stream of items coming in from a socket. Think messaging application. When a bunch of things are posted around the same time, the entire web application freezes for a second. Is there optimization i am missing with the react-flip-move component?

import React from 'react';

import FlipMove from 'react-flip-move';
import ReactTimeAgo from 'react-time-ago';
import { toJS } from 'mobx';
import UID from '../../../shared/UID';
import StreamItem from './StreamItem';

export default class StreamDisplay extends React.Component {
    constructor(props, context) {
      super(props, context)
     }

    render() {
        var data = toJS(this.props.data);

        if(data == undefined){
            return (
                <div>
                    NO DATA
                </div>
            )
        }else{
            return (
                <FlipMove>
                    {data.map((dataItem, i) => (
                        <StreamItem dataItem={dataItem} key={dataItem.uid}  />
                    ))}
                </FlipMove>
            )
        }

    }
}

[tobilen]

No optimization, sorry. The project is not bring developed further, so there won't be any such feature coming.

For your problem, I suggest some sort of throttling buffer in your components state. I.e. write all items in your state, add a useEffect hook on state change in which you transfer x items from buffer state to a state holding the items list for flip move, then wait y milliseconds.