feat: map content with useMemo

src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx

@@ -2,23 +2,30 @@ import { Tabs } from '@status-im/components'
 import { Stack } from 'tamagui'
 
 import ValidatorsList from './ValidatorsList'
-
+import { useMemo } from 'react'
-const VALIDATOR_TABS = [
-  {
-    label: 'Active',
-    value: 'active',
-  },
-  {
-    label: 'Pending',
-    value: 'pending',
-  },
-  {
-    label: 'Inactive',
-    value: 'inactive',
-  },
-]
 
 const ValidatorsTabs = () => {
+  const VALIDATOR_TABS = useMemo(
+    () => [
+      {
+        label: 'Active',
+        value: 'active',
+        children: <ValidatorsList />,
+      },
+      {
+        label: 'Pending',
+        value: 'pending',
+        children: <ValidatorsList />,
+      },
+      {
+        label: 'Inactive',
+        value: 'inactive',
+        children: <ValidatorsList />,
+      },
+    ],
+    [],
+  )
+
   return (
     <Tabs defaultValue="active">
       <Stack style={{ cursor: 'pointer', width: 'fit-content' }}>
@@ -30,15 +37,11 @@ const ValidatorsTabs = () => {
           ))}
         </Tabs.List>
       </Stack>
-      <Tabs.Content value="active" style={{ marginTop: '8px' }}>
+      {VALIDATOR_TABS.map(tab => (
-        <ValidatorsList />
+        <Tabs.Content value={tab.value} style={{ marginTop: '8px' }}>
-      </Tabs.Content>
+          {tab.children}
-      <Tabs.Content value="pending">
+        </Tabs.Content>
-        <ValidatorsList />
+      ))}
-      </Tabs.Content>
-      <Tabs.Content value="inactive">
-        <ValidatorsList />
-      </Tabs.Content>
     </Tabs>
   )
 }