From 09808fa7be02175bbc8fea8c1ae10b5027e7c4f6 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 24 Jul 2020 12:58:10 -0600 Subject: [PATCH] Only update RoomTiles when they change significantly --- src/components/views/rooms/RoomTile.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 2c4d1d0163..990510ac7a 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -55,14 +55,13 @@ import {ActionPayload} from "../../../dispatcher/payloads"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { NotificationState } from "../../../stores/notifications/NotificationState"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import { objectDiff, objectHasValueChange } from "../../../utils/objects"; interface IProps { room: Room; showMessagePreview: boolean; isMinimized: boolean; tag: TagID; - - // TODO: Incoming call boxes: https://github.com/vector-im/riot-web/issues/14177 } type PartialDOMRect = Pick; @@ -154,6 +153,24 @@ export default class RoomTile extends React.Component { MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged); } + public shouldComponentUpdate(nextProps: Readonly, nextState: Readonly): boolean { + // Whenever a prop change happens (or our parent updates) we can get told to update too. Try + // to minimize that by seeing if anything actually changed. + if (objectHasValueChange(this.props, nextProps)) { + console.log(`DIFF_PROPS@${this.props.room.roomId}`, objectDiff(this.props, nextProps)); + return true; + } + + // Do the same for state + if (objectHasValueChange(this.state, nextState)) { + console.log(`DIFF_STATE@${this.props.room.roomId}`, objectDiff(this.state, nextState)); + return true; + } + + // Finally, nothing changed so say so. + return false; + } + private onAction = (payload: ActionPayload) => { if (payload.action === "view_room" && payload.room_id === this.props.room.roomId && payload.show_room_tile) { setImmediate(() => {