From 068e33fc0fc7b5fe702ecca471e3f955282dfdd5 Mon Sep 17 00:00:00 2001
From: Wilson Furtado <72563697+wilsonfurtado2000@users.noreply.github.com>
Date: Tue, 31 Dec 2024 17:04:47 +0100
Subject: [PATCH] fix(toolbar): Removed unnecessary re render of the reactions
 component (#15433)

Added usememo to remove unnecessary re render. Fixes #15434.
---
 react/features/chat/components/web/ChatMessage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/react/features/chat/components/web/ChatMessage.tsx b/react/features/chat/components/web/ChatMessage.tsx
index 1f087164c7..5d412c69bf 100644
--- a/react/features/chat/components/web/ChatMessage.tsx
+++ b/react/features/chat/components/web/ChatMessage.tsx
@@ -1,5 +1,5 @@
 import { Theme } from '@mui/material';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
@@ -264,7 +264,7 @@ const ChatMessage = ({
      *
      * @returns {React$Element<*>}
      */
-    const renderReactions = () => {
+    const renderReactions = useMemo(() => {
         if (!message.reactions || message.reactions.size === 0) {
             return null;
         }
@@ -321,7 +321,7 @@ const ChatMessage = ({
                 </div>
             </Popover>
         );
-    };
+    }, [ message?.reactions, isHovered, isReactionsOpen ]);
 
     return (
         <div
@@ -366,7 +366,7 @@ const ChatMessage = ({
                                     <div className = { classes.chatMessageFooterLeft }>
                                         {message.reactions && message.reactions.size > 0 && (
                                             <>
-                                                {renderReactions()}
+                                                {renderReactions}
                                             </>
                                         )}
                                     </div>