unregister to change events for avatarUpdates on ActionPanel

ts/components/session/ActionsPanel.tsx

@@ -24,6 +24,7 @@ interface Props {
 }
 
 export class ActionsPanel extends React.Component<Props, State> {
+  private ourConversation: any;
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -31,6 +32,7 @@ export class ActionsPanel extends React.Component<Props, State> {
     };
 
     this.editProfileHandle = this.editProfileHandle.bind(this);
+    this.refreshAvatarCallback = this.refreshAvatarCallback.bind(this);
   }
 
   public componentDidMount() {
@@ -45,17 +47,33 @@ export class ActionsPanel extends React.Component<Props, State> {
         // When our primary device updates its avatar, we will need for a message sync to know about that.
         // Once we get the avatar update, we need to refresh this react component.
         // So we listen to changes on our profile avatar and use the updated avatarPath (done on message received).
-        conversation.on('change', () => {
-          if (conversation.changed?.profileAvatar) {
-            this.setState({
-              avatarPath: conversation.getAvatarPath(),
-            });
-          }
-        });
+        this.ourConversation = conversation;
+
+        this.ourConversation.on(
+          'change',
+          () => {
+            this.refreshAvatarCallback(this.ourConversation);
+          },
+          'refreshAvatarCallback'
+        );
       }
     );
   }
 
+  public refreshAvatarCallback(conversation: any) {
+    if (conversation.changed?.profileAvatar) {
+      this.setState({
+        avatarPath: conversation.getAvatarPath(),
+      });
+    }
+  }
+
+  public componentWillUnmount() {
+    if (this.ourConversation) {
+      this.ourConversation.off('change', null, 'refreshAvatarCallback');
+    }
+  }
+
   public Section = ({
     isSelected,
     onSelect,