Cache the results of shouldShowEvent in MessagePanel

Author: andybalaam

src/components/structures/MessagePanel.tsx

@@ -561,14 +561,38 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         });
     };
 
-    private getNextEventInfo(arr: MatrixEvent[], i: number): { nextEvent: MatrixEvent; nextTile: MatrixEvent } {
+    /**
+     * Find the next event in the list, and the next visible event in the list.
+     *
+     * @param arr        - the list of events to look in
+     * @param shouldShow - which of these events should be shown (a cache of
+     *                     calling this.shouldShowEvent(e) for each e in arr)
+     * @param i          - where in the list we are now
+     *
+     * @returns { nextEvent, nextTile }
+     *
+     * nextEvent is the last event in the supplied array.
+     *
+     * nextTile is the last event in the array that we will show a tile for. It
+     * is used to to determine the 'last successful' flag when rendering the
+     * tile.
+     */
+    private getNextEventInfo(
+        arr: MatrixEvent[],
+        shouldShow: boolean[],
+        i: number,
+    ): { nextEvent: MatrixEvent; nextTile: MatrixEvent } {
+        // WARNING: this method is on a hot path.
+
         const nextEvent = i < arr.length - 1 ? arr[i + 1] : null;
 
-        // The next event with tile is used to to determine the 'last successful' flag
-        // when rendering the tile. The shouldShowEvent function is pretty quick at what
-        // it does, so this should have no significant cost even when a room is used for
-        // not-chat purposes.
-        const nextTile = arr.slice(i + 1).find((e) => this.shouldShowEvent(e));
+        let nextTile = null;
+        for (let n = i + 1; n < arr.length; n++) {
+            if (shouldShow[n]) {
+                nextTile = arr[n];
+                break;
+            }
+        }
 
         return { nextEvent, nextTile };
     }
@@ -587,22 +611,21 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     }
 
     private getEventTiles(): ReactNode[] {
-        let i;
-
         // first figure out which is the last event in the list which we're
         // actually going to show; this allows us to behave slightly
         // differently for the last event in the list. (eg show timestamp)
         //
         // we also need to figure out which is the last event we show which isn't
         // a local echo, to manage the read-marker.
-        let lastShownEvent;
+        let lastShownEvent: MatrixEvent | undefined;
+        const shouldShow = this.props.events.map((e) => this.shouldShowEvent(e));
 
         let lastShownNonLocalEchoIndex = -1;
-        for (i = this.props.events.length - 1; i >= 0; i--) {
-            const mxEv = this.props.events[i];
-            if (!this.shouldShowEvent(mxEv)) {
+        for (let i = this.props.events.length - 1; i >= 0; i--) {
+            if (!shouldShow[i]) {
                 continue;
             }
+            const mxEv = this.props.events[i];
 
             if (lastShownEvent === undefined) {
                 lastShownEvent = mxEv;
@@ -631,11 +654,12 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         let grouper: BaseGrouper = null;
 
-        for (i = 0; i < this.props.events.length; i++) {
+        for (let i = 0; i < this.props.events.length; i++) {
             const mxEv = this.props.events[i];
+            const shouldShowEv = shouldShow[i];
             const eventId = mxEv.getId();
             const last = mxEv === lastShownEvent;
-            const { nextEvent, nextTile } = this.getNextEventInfo(this.props.events, i);
+            const { nextEvent, nextTile } = this.getNextEventInfo(this.props.events, shouldShow, i);
 
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
@@ -658,7 +682,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             }
 
             if (!grouper) {
-                if (this.shouldShowEvent(mxEv)) {
+                if (shouldShowEv) {
                     // make sure we unpack the array returned by getTilesForEvent,
                     // otherwise React will auto-generate keys, and we will end up
                     // replacing all the DOM elements every time we paginate.