Merge pull request #285 from matrix-org/rav/no_rerender_in_umount

Avoid rerendering during Room unmount

src/components/structures/MessagePanel.js

@@ -85,6 +85,12 @@ module.exports = React.createClass({
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
         // to manage its animations
         this._readReceiptMap = {};
+
+        this._isMounted = true;
+    },
+
+    componentWillUnmount: function() {
+        this._isMounted = false;
     },
 
     /* get the DOM node representing the given event */
@@ -201,6 +207,10 @@ module.exports = React.createClass({
         }
     },
 
+    _isUnmounting: function() {
+        return !this._isMounted;
+    },
+
     _getEventTiles: function() {
         var EventTile = sdk.getComponent('rooms.EventTile');
 
@@ -351,6 +361,7 @@ module.exports = React.createClass({
                         onWidgetLoad={this._onWidgetLoad}
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
+                        checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.status}
                         last={last} isSelectedEvent={highlight}/>
                 </li>

src/components/views/rooms/EventTile.js

@@ -116,6 +116,12 @@ module.exports = React.createClass({
          */
         readReceiptMap: React.PropTypes.object,
 
+        /* A function which is used to check if the parent panel is being
+         * unmounted, to avoid unnecessary work. Should return true if we
+         * are being unmounted.
+         */
+        checkUnmounting: React.PropTypes.func,
+
         /* the status of this event - ie, mxEvent.status. Denormalised to here so
          * that we can tell when it changes. */
         eventSendStatus: React.PropTypes.string,
@@ -261,6 +267,7 @@ module.exports = React.createClass({
                 <ReadReceiptMarker key={userId} member={member}
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
+                    checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                 />

src/components/views/rooms/ReadReceiptMarker.js

@@ -53,6 +53,11 @@ module.exports = React.createClass({
         // this room
         readReceiptInfo: React.PropTypes.object,
 
+        // A function which is used to check if the parent panel is being
+        // unmounted, to avoid unnecessary work. Should return true if we
+        // are being unmounted.
+        checkUnmounting: React.PropTypes.func,
+
         // callback for clicks on this RR
         onClick: React.PropTypes.func,
     },
@@ -81,6 +86,13 @@ module.exports = React.createClass({
             return;
         }
 
+        // checking the DOM properties can force a re-layout, which can be
+        // quite expensive; so if the parent messagepanel is being unmounted,
+        // then don't bother with this.
+        if (this.props.checkUnmounting && this.props.checkUnmounting()) {
+            return;
+        }
+
         var avatarNode = ReactDOM.findDOMNode(this);
         rrInfo.top = avatarNode.offsetTop;
         rrInfo.left = avatarNode.offsetLeft;