From 568e7aef8b7bed82504bfed976577aa2abaa0b10 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 19 Apr 2016 19:38:54 +0100
Subject: [PATCH] Avoid rerendering EventTiles when not necessary

Each individual eventtile isn't particularly expensive, but when you have 500
of them, they start adding up. Shuffle some of the stuff into MessagePanel, so
that we can shouldComponentUpdate EventTiles properly.
---
 src/components/structures/MessagePanel.js | 36 +++++++++-
 src/components/views/rooms/EventTile.js   | 81 +++++++++++++++++------
 2 files changed, 94 insertions(+), 23 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 8292c0dee1..defc8151a9 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -19,6 +19,8 @@ var ReactDOM = require("react-dom");
 var dis = require("../../dispatcher");
 var sdk = require('../../index');
 
+var MatrixClientPeg = require('../../MatrixClientPeg')
+
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 module.exports = React.createClass({
@@ -150,7 +152,7 @@ module.exports = React.createClass({
             this.refs.scrollPanel.scrollToBottom();
         }
     },
-    
+
     /**
      * Page up/down.
      *
@@ -335,13 +337,17 @@ module.exports = React.createClass({
         // Local echos have a send "status".
         var scrollToken = mxEv.status ? undefined : eventId;
 
+        var readReceipts = this._getReadReceiptsForEvent(mxEv);
+
         ret.push(
                 <li key={eventId}
                         ref={this._collectEventNode.bind(this, eventId)}
                         data-scroll-token={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
                         onWidgetLoad={this._onWidgetLoad}
-                        last={last} isSelectedEvent={highlight} />
+                        readReceipts={readReceipts}
+                        eventSendStatus={mxEv.status}
+                        last={last} isSelectedEvent={highlight}/>
                 </li>
         );
 
@@ -359,6 +365,30 @@ module.exports = React.createClass({
                 !== new Date(nextEventTs).toDateString());
     },
 
+    // get a list of the userids whose read receipts should
+    // be shown next to this event
+    _getReadReceiptsForEvent: function(event) {
+        var myUserId = MatrixClientPeg.get().credentials.userId;
+
+        // get list of read receipts, sorted most recent first
+        var room = MatrixClientPeg.get().getRoom(event.getRoomId());
+        if (!room) {
+            // huh.
+            return null;
+        }
+
+        return room.getReceiptsForEvent(event).filter(function(r) {
+            return r.type === "m.read" && r.userId != myUserId;
+        }).sort(function(r1, r2) {
+            return r2.data.ts - r1.data.ts;
+        }).map(function(r) {
+            return room.getMember(r.userId);
+        }).filter(function(m) {
+            // check that the user is a known room member
+            return m;
+        });
+    },
+
     _getReadMarkerTile: function(visible) {
         var hr;
         if (visible) {
@@ -431,7 +461,7 @@ module.exports = React.createClass({
 
         return (
             <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel mx_fadable"
-                    onScroll={ this.props.onScroll } 
+                    onScroll={ this.props.onScroll }
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }
                     style={ style }
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 06e9699e9d..4acd299e4f 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -29,6 +29,8 @@ var Velociraptor = require('../../../Velociraptor');
 require('../../../VelocityBounce');
 var dispatcher = require("../../../dispatcher");
 
+var ObjectUtils = require('../../../ObjectUtils');
+
 var bounce = false;
 try {
     if (global.localStorage) {
@@ -107,12 +109,67 @@ module.exports = React.createClass({
 
         /* callback called when dynamic content in events are loaded */
         onWidgetLoad: React.PropTypes.func,
+
+        /* a list of Room Members whose read-receipts we should show */
+        readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
+
+        /* the status of this event - ie, mxEvent.status. Denormalised to here so
+         * that we can tell when it changes. */
+        eventSendStatus: React.PropTypes.string,
     },
 
     getInitialState: function() {
         return {menu: false, allReadAvatars: false};
     },
 
+    shouldComponentUpdate: function (nextProps, nextState) {
+        if (!ObjectUtils.shallowEqual(this.state, nextState)) {
+            return true;
+        }
+
+        if (!this._propsEqual(this.props, nextProps)) {
+            return true;
+        }
+
+        return false;
+    },
+
+    _propsEqual: function(objA, objB) {
+        var keysA = Object.keys(objA);
+        var keysB = Object.keys(objB);
+
+        if (keysA.length !== keysB.length) {
+            return false;
+        }
+
+        for (var i = 0; i < keysA.length; i++) {
+            var key = keysA[i];
+
+            if (!objB.hasOwnProperty(key)) {
+                return false;
+            }
+
+            // need to deep-compare readReceipts
+            if (key == 'readReceipts') {
+                var rA = objA[key];
+                var rB = objB[key];
+                if (rA.length !== rB.length) {
+                    return false;
+                }
+                for (var j = 0; j < rA.length; j++) {
+                    if (rA[j].userId !== rB[j].userId) {
+                        return false;
+                    }
+                }
+            } else {
+                if (objA[key] !== objB[key]) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    },
+
     shouldHighlight: function() {
         var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
@@ -153,20 +210,6 @@ module.exports = React.createClass({
 
     getReadAvatars: function() {
         var avatars = [];
-
-        var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-
-        if (!room) return [];
-
-        var myUserId = MatrixClientPeg.get().credentials.userId;
-
-        // get list of read receipts, sorted most recent first
-        var receipts = room.getReceiptsForEvent(this.props.mxEvent).filter(function(r) {
-            return r.type === "m.read" && r.userId != myUserId;
-        }).sort(function(r1, r2) {
-            return r2.data.ts - r1.data.ts;
-        });
-
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
         var left = 0;
@@ -176,11 +219,9 @@ module.exports = React.createClass({
             easing: 'easeOut'
         };
 
+        var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
-            var member = room.getMember(receipts[i].userId);
-            if (!member) {
-                continue;
-            }
+            var member = receipts[i];
 
             // Using react refs here would mean both getting Velociraptor to expose
             // them and making them scoped to the whole RoomView. Not impossible, but
@@ -302,9 +343,9 @@ module.exports = React.createClass({
         var classes = classNames({
             mx_EventTile: true,
             mx_EventTile_sending: ['sending', 'queued'].indexOf(
-                this.props.mxEvent.status
+                this.props.eventSendStatus
             ) !== -1,
-            mx_EventTile_notSent: this.props.mxEvent.status == 'not_sent',
+            mx_EventTile_notSent: this.props.eventSendStatus == 'not_sent',
             mx_EventTile_highlight: this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: this.props.continuation,