Dynamic update of stack grid does not work

[orangecoding]

I've tried hard, but I couldn't get a dynamic update to work.

I've a websocket connection where new stuff is coming in. If new stuff is coming in, I want the grid to update it's layout. This is what I've tried:

I've removed some stuff which is not necessary to understand the problem (`withWebsocket' is a higher order component)

As you can see, each time data is coming in I'll update the data and the gridlayout, but the grid is actually never being rendered again.

Obviously I'm using it wrong.. It would be much helpful to see the source of your demo to understand the usage a bit better...

EDIT: I got it to work by setting the state, but this triggers the complete render method which is a huge overhead.. :-/

import React, {Component} from 'react';
import StackGrid from 'react-stack-grid';

class Wall extends Component {

    constructor(props) {
        super(props);
        this.internalData = [];
    }

    componentWillMount = () => {
        this.props.internalEmitter.on('wallUpdates', update => {
            this.internalData.push(update);
            this.grid.updateLayout();
        });
    };

    render = () => {
        return (
            <StackGrid
                gridRef={grid => this.grid = grid}
                gutterWidth={20}
                gutterHeight={20}
            >
                {
                    this.internalData.map(data =>{
                        return <div key={tweet.id} style={
                            {
                                height: Math.floor(Math.random() * 200) + 100,
                                backgroundColor: 'rgba(' + (Math.floor(Math.random() * 200) + 10) + ',' + (Math.floor(Math.random() * 200) + 10) + ',23,1)'
                            }
                        }>{data.text}</div>})
                    })
                }
            </StackGrid>
        );
    }
}

export default withWebsockets(Wall, ['wallUpdates']);

[orangecoding]

Sorry.. too stupid ;)