From 2e028c468e0a205427dfb765a3e0fc8afe135b26 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Wed, 2 Feb 2022 12:58:15 +0100
Subject: [PATCH] Fix mention hook order (#214)

---
 .../react-chat/src/components/Chat/ChatMessageContent.tsx  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
index 9f44a9e8..b620890c 100644
--- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
@@ -25,17 +25,16 @@ export function Mention({ id, setMentioned, className }: MentionProps) {
   const [showMenu, setShowMenu] = useState(false);
   const identity = useIdentity();
 
-  if (!contact) return <>{id}</>;
-
   useEffect(() => {
-    if (identity) {
+    if (identity && contact) {
       if (contact.id === utils.bufToHex(identity.publicKey)) setMentioned(true);
     }
-  }, [contact.id, identity]);
+  }, [contact, identity]);
 
   const ref = useRef(null);
   useClickOutside(ref, () => setShowMenu(false));
 
+  if (!contact) return <>{id}</>;
   return (
     <MentionBLock
       onClick={() => setShowMenu(!showMenu)}