From 89ee797fc77d7c4ff65078311f8742638f705a9a Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 20 Jun 2024 15:37:24 +0300
Subject: [PATCH] oplimize tabs render

---
 .../web/Components/Calculation/Form/index.jsx |  5 ++--
 .../Components/Calculation/Settings/index.jsx |  5 ++--
 apps/web/Components/Layout/Navigation.jsx     | 29 ++++++++++---------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/web/Components/Calculation/Form/index.jsx b/apps/web/Components/Calculation/Form/index.jsx
index fc2c0c0..a9a34fe 100644
--- a/apps/web/Components/Calculation/Form/index.jsx
+++ b/apps/web/Components/Calculation/Form/index.jsx
@@ -10,6 +10,7 @@ import Unlimited from './Unlimited';
 import Background from '@/Components/Layout/Background';
 import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
+import { memo } from 'react';
 import styled from 'styled-components';
 import { Tabs } from 'ui/elements';
 
@@ -45,7 +46,7 @@ const ComponentWrapper = styled.div`
   }
 `;
 
-export function Form() {
+export const Form = memo(() => {
   const { $process } = useStore();
 
   const filteredTabs =
@@ -64,4 +65,4 @@ export function Form() {
       </Tabs>
     </Wrapper>
   );
-}
+});
diff --git a/apps/web/Components/Calculation/Settings/index.jsx b/apps/web/Components/Calculation/Settings/index.jsx
index 82d8948..db46bb6 100644
--- a/apps/web/Components/Calculation/Settings/index.jsx
+++ b/apps/web/Components/Calculation/Settings/index.jsx
@@ -3,6 +3,7 @@ import * as config from './config';
 import Background from '@/Components/Layout/Background';
 import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
+import { memo } from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled(Background)`
@@ -17,7 +18,7 @@ const Wrapper = styled(Background)`
   }
 `;
 
-export function Settings() {
+export const Settings = memo(() => {
   const { $process } = useStore();
 
   const mainRows = $process.has('Unlimited')
@@ -33,4 +34,4 @@ export function Settings() {
       {paramsRows}
     </Wrapper>
   );
-}
+});
diff --git a/apps/web/Components/Layout/Navigation.jsx b/apps/web/Components/Layout/Navigation.jsx
index e78732d..484815e 100644
--- a/apps/web/Components/Layout/Navigation.jsx
+++ b/apps/web/Components/Layout/Navigation.jsx
@@ -1,5 +1,5 @@
 import { NavigationContext } from '@/context/navigation';
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div`
@@ -39,18 +39,19 @@ export function NavigationBar() {
   );
 }
 
-function Tab({ children, visible }) {
-  if (!visible) return null;
+const Display = styled.div`
+  display: ${(props) => (props.visible ? 'block' : 'none')};
+`;
 
-  return children;
-}
+export const Tabs = memo(
+  ({ tabs }) => {
+    const { currentTab } = useContext(NavigationContext);
 
-export function Tabs({ tabs }) {
-  const { currentTab } = useContext(NavigationContext);
-
-  return tabs.map(({ Component, key }) => (
-    <Tab key={key} visible={key === currentTab}>
-      <Component />
-    </Tab>
-  ));
-}
+    return tabs.map(({ Component, key }) => (
+      <Display key={key} visible={key === currentTab}>
+        <Component key={key} />
+      </Display>
+    ));
+  },
+  (prevProps, nextProps) => prevProps.tabs.length === nextProps.tabs.length
+);