From 229c4b98b44d14117a272c817ffb95ed622ec15d Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 20 May 2021 18:01:38 +0100
Subject: [PATCH] use userGroups cached value to avoid re-render

---
 src/components/views/elements/Flair.js        |  2 +-
 .../views/messages/SenderProfile.js           | 35 ++++++++++++-------
 src/stores/FlairStore.js                      |  4 +++
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index 73d5b91511..23858b860d 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -116,7 +116,7 @@ export default class Flair extends React.Component {
 
     render() {
         if (this.state.profiles.length === 0) {
-            return <span className="mx_Flair" />;
+            return null;
         }
         const avatars = this.state.profiles.map((profile, index) => {
             return <FlairAvatar key={index} groupProfile={profile} />;
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index f1855de99e..8f10954370 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -31,21 +31,23 @@ export default class SenderProfile extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    state = {
-        userGroups: null,
-        relatedGroups: [],
-    };
+    constructor(props) {
+        super(props);
+        const senderId = this.props.mxEvent.getSender();
 
+        this.state = {
+            userGroups: FlairStore.cachedPublicisedGroups(senderId) || [],
+            relatedGroups: [],
+        };
+    }
     componentDidMount() {
         this.unmounted = false;
         this._updateRelatedGroups();
 
-        FlairStore.getPublicisedGroupsCached(
-            this.context, this.props.mxEvent.getSender(),
-        ).then((userGroups) => {
-            if (this.unmounted) return;
-            this.setState({userGroups});
-        });
+        if (this.state.userGroups.length === 0) {
+            this.getPublicisedGroups();
+        }
+
 
         this.context.on('RoomState.events', this.onRoomStateEvents);
     }
@@ -55,6 +57,15 @@ export default class SenderProfile extends React.Component {
         this.context.removeListener('RoomState.events', this.onRoomStateEvents);
     }
 
+    async getPublicisedGroups() {
+        if (!this.unmounted) {
+            const userGroups = await FlairStore.getPublicisedGroupsCached(
+                this.context, this.props.mxEvent.getSender(),
+            );
+            this.setState({userGroups});
+        }
+    }
+
     onRoomStateEvents = event => {
         if (event.getType() === 'm.room.related_groups' &&
             event.getRoomId() === this.props.mxEvent.getRoomId()
@@ -93,10 +104,10 @@ export default class SenderProfile extends React.Component {
         const {msgtype} = mxEvent.getContent();
 
         if (msgtype === 'm.emote') {
-            return <span />; // emote message must include the name so don't duplicate it
+            return null; // emote message must include the name so don't duplicate it
         }
 
-        let flair = <div />;
+        let flair = null;
         if (this.props.enableFlair) {
             const displayedGroups = this._getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
diff --git a/src/stores/FlairStore.js b/src/stores/FlairStore.js
index 53d07d0452..23254b98ab 100644
--- a/src/stores/FlairStore.js
+++ b/src/stores/FlairStore.js
@@ -65,6 +65,10 @@ class FlairStore extends EventEmitter {
         delete this._userGroups[userId];
     }
 
+    cachedPublicisedGroups(userId) {
+        return this._userGroups[userId];
+    }
+
     getPublicisedGroupsCached(matrixClient, userId) {
         if (this._userGroups[userId]) {
             return Promise.resolve(this._userGroups[userId]);