Row heights are wrong with react-virtualized List and CellMeasurer

Question

Can someone take a look at my react-virtualized setup, please? I'm sure it's designed improperly because cell heights are not being measured properly.

https://gist.github.com/zackster/31fb5a983a33b303626cd8ae9dee3b94

I am brand new to React.js (this is my first project in React, so some of the bad design is probably attributable to that). I pass measure into the ChatHistoryCell, which passes it into the various subcomponents that inevitably call it upon their respective componentDidMount events.

I have basically three major bugs with this.

1. I want it to scroll to the bottom immediately after it loads the first time. Not sure how to do this? The component seems to re render a lot so possibly the answer involves a state flag? You'll notice the gist currently has this._list.scrollToRow(selectedThread.chat_log.length - 1); in componentDidUpdate() but it's not working

2. The computed row heights are often dramatically wrong.

3. If I resize the width of the window , and then I call these methods:

        selectedConversation.cellMeasurerCache.clearAll();
        selectedConversation.cellMeasurer.resetMeasurements();
        selectedConversation.listRef.recomputeRowHeights();
        selectedConversation.listRef.forceUpdateGrid();

after the resizing, it looks bad. But then if I scroll out of view, and then back in view, it looks nice and adjusted to the new width.