tidy: refactor

src/components/account/AccountSummary.tsx

@@ -77,7 +77,8 @@ export default function AccountSummary(props: Props) {
     [accountSummaryTabs, setAccountSummaryTabs],
   )
 
-  const items = [
+  const items = useMemo(() => {
+    const itemsArray = [
       {
         title: `Credit Account ${props.account.id} Composition`,
         renderContent: () =>
@@ -103,9 +104,8 @@ export default function AccountSummary(props: Props) {
         renderSubTitle: () => <></>,
       },
     ]
-
     if (chainConfig.perps)
-    items.push({
+      itemsArray.push({
         title: 'Perp Positions',
         renderContent: () =>
           props.account && props.account.perps.length > 0 ? (
@@ -116,6 +116,17 @@ export default function AccountSummary(props: Props) {
         renderSubTitle: () => <></>,
       })
 
+    return itemsArray
+  }, [
+    props.account,
+    borrowAssetsData,
+    lendingAssetsData,
+    props.isHls,
+    chainConfig.perps,
+    handleToggle,
+    accountSummaryTabs,
+  ])
+
   if (!props.account) return null
   return (
     <div className='h-[546px] max-w-screen overflow-y-scroll scrollbar-hide w-93.5'>