oplimize tabs render

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>
   );
-}
+});

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>
   );
-}
+});

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
+);