refactor: profile component for better performance

src/common/component/User/index.tsx

@@ -42,6 +42,30 @@ const User: FC<Props> = ({
   };
   if (!curr) return null;
   const online = curr.online || curr.uid == loginUid;
+  if (!popover)
+    return (
+      <ContextMenu
+        cid={cid}
+        uid={uid}
+        enable={enableContextMenu}
+        visible={contextMenuVisible}
+        hide={hideContextMenu}
+      >
+        <StyledWrapper
+          size={avatarSize}
+          className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
+          onDoubleClick={dm ? handleDoubleClick : undefined}
+          onContextMenu={enableContextMenu ? handleContextMenuEvent : undefined}
+        >
+          <div className="avatar">
+            <Avatar url={curr.avatar} name={curr.name} alt="avatar" />
+            <div className={`status ${online ? "online" : "offline"}`}></div>
+          </div>
+          {!compact && <span className="name">{curr?.name}</span>}
+          {owner && <IconOwner />}
+        </StyledWrapper>
+      </ContextMenu>
+    );
   return (
     <ContextMenu
       cid={cid}
@@ -53,7 +77,6 @@ const User: FC<Props> = ({
       <Tippy
         inertia={true}
         interactive
-        disabled={!popover}
         placement="left"
         trigger="click"
         content={<Profile uid={uid} type="card" cid={cid} />}

src/routes/chat/ChannelChat/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
 import { useDebounce } from "rooks";
 import { NavLink, useLocation } from "react-router-dom";
 import Tippy from "@tippyjs/react";
@@ -32,7 +32,7 @@ type Props = {
   cid?: number;
   dropFiles?: File[];
 };
-export default function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
+function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
   const { values: agoraConfig } = useConfig("agora");
   const {
     list: msgIds,
@@ -216,3 +216,4 @@ export default function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
     </>
   );
 }
+export default memo(ChannelChat);

src/routes/chat/index.tsx

@@ -1,5 +1,5 @@
 // import React from 'react';
-import { useState } from "react";
+import { memo, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import StyledWrapper from "./styled";
@@ -14,7 +14,7 @@ import { useAppSelector } from "../../app/store";
 import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
 import GuestChannelChatInfo from "./GuestChannelChatInfo";
 import GuestSessionList from "./GuestSessionList";
-export default function ChatPage() {
+function ChatPage() {
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
   const { channel_id = 0, user_id = 0 } = useParams();
@@ -66,3 +66,4 @@ export default function ChatPage() {
     </>
   );
 }
+export default memo(ChatPage);

src/routes/home/index.tsx

@@ -1,4 +1,4 @@
-// import React from 'react';
+import { memo } from "react";
 import { Outlet, NavLink, useLocation, useMatch } from "react-router-dom";
 import StyledWrapper from "./styled";
 import User from "./User";
@@ -16,7 +16,7 @@ import FavIcon from "../../assets/icons/bookmark.svg";
 import FolderIcon from "../../assets/icons/folder.svg";
 import { useAppSelector } from "../../app/store";
 // const routes = ["/setting", "/setting/channel/:cid"];
-export default function HomePage() {
+function HomePage() {
   const isHomePath = useMatch(`/`);
   const isChatHomePath = useMatch(`/chat`);
   const { pathname } = useLocation();
@@ -96,3 +96,4 @@ export default function HomePage() {
     </>
   );
 }
+export default memo(HomePage);

src/routes/users/index.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from "react";
+import { memo, useEffect } from "react";
 import { NavLink, useParams, useLocation } from "react-router-dom";
 import { useDispatch } from "react-redux";
+import _ from "lodash";
 import { updateRememberedNavs } from "../../app/slices/ui";
 import Search from "../../common/component/Search";
 import User from "../../common/component/User";
@@ -10,12 +11,12 @@ import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import { useAppSelector } from "../../app/store";
 
-export default function UsersPage() {
+function UsersPage() {
   const dispatch = useDispatch();
   const { pathname } = useLocation();
 
   const { user_id } = useParams();
-  const userIds = useAppSelector((store) => store.users.ids);
+  const userIds = useAppSelector((store) => store.users.ids, _.isEqual);
   useEffect(() => {
     dispatch(updateRememberedNavs({ key: "user" }));
     return () => {
@@ -46,3 +47,4 @@ export default function UsersPage() {
     </StyledWrapper>
   );
 }
+export default memo(UsersPage);