whoops

client/src/components/chat/ParticipantsBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { axiosClient } from '@/App.tsx';
 import { ContactsProps } from '@/pages/Chat.tsx';
 import { socket } from '@/socket/socket.tsx';
@@ -132,9 +132,8 @@ function ParticipantsBar({
     }
   }, [currentContact]);
 
-  useEffect(() => {
-    setParticipants((prevParticipants) => {
-      return [...prevParticipants].sort((a, b) => {
+  const sortedParticipants = useMemo(() => {
+    return [...participants].sort((a, b) => {
       if (a.isowner !== b.isowner) {
         return b.isowner ? 1 : -1;
       }
@@ -145,7 +144,6 @@ function ParticipantsBar({
 
       return a.username.localeCompare(b.username);
     });
-    });
   }, [participants]);
 
   useEffect(() => {
@@ -239,7 +237,7 @@ function ParticipantsBar({
     };
   }, [socket, currentContact, currentContact, user?.user_id]);
 
-  const ParticipantsList = participants?.map(
+  const ParticipantsList = sortedParticipants?.map(
     (participant: ParticipantsProps) => (
       <ContextMenu key={participant.user_id}>
         <ContextMenuTrigger>