chore: change useMemo to useCallback

openRin · Jul 11, 2024 · 200631c · 200631c
1 parent 361a8ea
commit 200631c
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/client/src/components/feed_card.tsx b/client/src/components/feed_card.tsx
@@ -12,7 +12,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
         createdAt: Date, updatedAt: Date
     }) {
     const { t } = useTranslation()
-    const UI = useMemo(() => (
+    return useMemo(() => (
         <>
             <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 ani-show bg-button">
                 {avatar &&
@@ -54,5 +54,4 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
             </Link>
         </>
     ), [id, title, avatar, draft, listed, top, summary, hashtags, createdAt, updatedAt])
-    return UI
 }
diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
@@ -16,7 +16,7 @@ export function Header({ children }: { children?: React.ReactNode }) {
     const profile = useContext(ProfileContext);
     const { t } = useTranslation()
 
-    const UI = useMemo(() => (
+    return useMemo(() => (
         <>
             <div className="fixed z-40">
                 <div className="w-screen">
@@ -68,7 +68,6 @@ export function Header({ children }: { children?: React.ReactNode }) {
             <div className="h-20"></div>
         </>
     ), [profile, children])
-    return UI
 }
 
 function NavItem({ menu, title, selected, href, when = true, onClick }: {
@@ -272,7 +271,7 @@ function UserAvatar({ className, profile, onClose }: { className?: string, profi
                 <i className="ri-user-received-line"></i>
             </button>
         </>}
-        {LoginModal}
+        <LoginModal />
     </div>
     )
 }

diff --git a/client/src/hooks/useLoginModal.tsx b/client/src/hooks/useLoginModal.tsx
@@ -1,6 +1,6 @@
 import { t } from "i18next";
 import { Button } from "primereact/button";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import ReactModal from "react-modal";
 import { Icon } from "../components/icon";
 import { Input } from "../components/input";
@@ -16,7 +16,7 @@ export function useLoginModal(onClose?: () => void) {
             onClose?.()
         }, 100)
     }, [username, password])
-    const LoginModal = useMemo(() => {
+    const LoginModal = useCallback(() => {
         return (
             <ReactModal
                 isOpen={isOpened}

diff --git a/client/src/page/feed.tsx b/client/src/page/feed.tsx
@@ -413,7 +413,7 @@ function CommentInput({
       )}
       {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
       <AlertUI />
-      {LoginModal}
+      <LoginModal />
     </div>
   );
 }