Remove key caching from Timeline

ts/components/conversation/Timeline.tsx

@@ -752,7 +752,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     const typingBubbleRow = this.getTypingBubbleRow();
     let rowContents: ReactNode;
 
-    let stableKey = key;
     if (haveOldest && row === 0) {
       rowContents = (
         <div data-row={row} style={styleWithWidth} role="row">
@@ -800,7 +799,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       const previousMessageId: undefined | string = items[itemIndex - 1];
       const messageId = items[itemIndex];
       const nextMessageId: undefined | string = items[itemIndex + 1];
-      stableKey = messageId;
 
       const actionProps = getActions(this.props);
 
@@ -831,7 +829,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       <CellMeasurer
         cache={this.cellSizeCache}
         columnIndex={0}
-        key={stableKey}
+        key={key}
         parent={parent}
         rowIndex={index}
         width={this.mostRecentWidth}

ts/state/ducks/conversations.ts

@@ -2328,13 +2328,6 @@ export function reducer(
       ? existingConversation.resetCounter + 1
       : 0;
 
-    const sorted = orderBy(
-      messages,
-      ['received_at', 'sent_at'],
-      ['ASC', 'ASC']
-    );
-    const messageIds = sorted.map(message => message.id);
-
     const lookup = fromPairs(messages.map(message => [message.id, message]));
 
     let { newest, oldest } = metrics;
@@ -2355,6 +2348,13 @@ export function reducer(
       }
     }
 
+    const sorted = orderBy(
+      values(lookup),
+      ['received_at', 'sent_at'],
+      ['ASC', 'ASC']
+    );
+    const messageIds = sorted.map(message => message.id);
+
     return {
       ...state,
       selectedMessage: scrollToMessageId,