From aafb57d2b81fa83f6812298f0dc66d35a6e1b89d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 19 Oct 2023 08:58:28 +0300
Subject: [PATCH] feat: map content with useMemo

---
 .../ValidatorsTabs/ValidatorsTabs.tsx         | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx
index d96c3238..372f6e4c 100644
--- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx
+++ b/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'
-
-const VALIDATOR_TABS = [
-  {
-    label: 'Active',
-    value: 'active',
-  },
-  {
-    label: 'Pending',
-    value: 'pending',
-  },
-  {
-    label: 'Inactive',
-    value: 'inactive',
-  },
-]
+import { useMemo } from 'react'
 
 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' }}>
-        <ValidatorsList />
-      </Tabs.Content>
-      <Tabs.Content value="pending">
-        <ValidatorsList />
-      </Tabs.Content>
-      <Tabs.Content value="inactive">
-        <ValidatorsList />
-      </Tabs.Content>
+      {VALIDATOR_TABS.map(tab => (
+        <Tabs.Content value={tab.value} style={{ marginTop: '8px' }}>
+          {tab.children}
+        </Tabs.Content>
+      ))}
     </Tabs>
   )
 }