update with useMemo

src/components/ProposalMeta.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { format, parseISO } from 'date-fns'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
+import { useMemo } from 'react'
 import { ProposalDetails } from 'src/types/app'
 
 interface ProposalMetaProps {
@@ -15,17 +16,18 @@ const FileTypeIconMap: Record<string, IconDefinition> = {
 export default function ProposalMeta({ proposalDetails }: ProposalMetaProps) {
   const { data: session } = useSession()
 
-  if (!proposalDetails) return null
-
-  const getSupervisedBy = () => {
-    if (session?.user?.email && proposalDetails.supervisedBy.length > 0) {
+  const supervisedBy = useMemo(() => {
+    if (session?.user?.email && proposalDetails?.supervisedBy?.length > 0) {
       return proposalDetails.supervisedBy[0].supervisor.name
-    } else if (proposalDetails.supervisedBy.name) {
+    } else if (proposalDetails?.supervisedBy.name) {
       return proposalDetails.supervisedBy.name
     } else {
       return 'Unassigned'
     }
-  }
+  }, [session, proposalDetails])
+
+  if (!proposalDetails) return null
+
   return (
     <div className="p-4">
       <h1 className="text-base font-bold">{proposalDetails.title}</h1>
@@ -64,7 +66,7 @@ export default function ProposalMeta({ proposalDetails }: ProposalMetaProps) {
         )}
         <div className="text-base">
           <div className="font-bold">Supervised By</div>
-          <div>{getSupervisedBy()}</div>
+          <div>{supervisedBy}</div>
         </div>
 
         {proposalDetails.typeKey === 'STUDENT' && (