use userGroups cached value to avoid re-render

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} />;

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,

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]);