diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6b61759344..9398a21516 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -237,7 +237,6 @@ module.exports = React.createClass({
         this.eventNodes = {};
 
         var i;
-        let melsIndex = 0;
 
         // first figure out which is the last event in the list which we're
         // actually going to show; this allows us to behave slightly
@@ -303,10 +302,10 @@ module.exports = React.createClass({
                 // instead will allow new props to be provided. In turn, the shouldComponentUpdate
                 // method on MELS can be used to prevent unnecessary renderings.
                 //
-                // melsIndex is deliberately unrelated to the contained events so that pagination
-                // will not cause it to be recreated.
-                const key = "membereventlistsummary-" + melsIndex;
-                melsIndex++;
+                // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
+                // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
+                // membership event, which will not change during forward pagination.
+                const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
 
                 if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
                     let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;