refactor: utilize React memo to decrease unneeded re-renders (#1554)

PolkaGate · Sep 23, 2024 · 997ea77 · 997ea77
1 parent 103222e
commit 997ea77
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/...nsion-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx b/...nsion-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx
@@ -159,7 +159,7 @@ export const EyeIconFullScreen = ({ isHidden, onClick }: { isHidden: boolean | u
   );
 };
 
-export default function AccountInformationForDetails ({ accountAssets, address, label, price, pricesInCurrency, selectedAsset, setAssetIdOnAssetHub, setSelectedAsset }: AddressDetailsProps): React.ReactElement {
+function AccountInformationForDetails ({ accountAssets, address, label, price, pricesInCurrency, selectedAsset, setAssetIdOnAssetHub, setSelectedAsset }: AddressDetailsProps): React.ReactElement {
   const theme = useTheme();
   const { account, api, chain, formatted, genesisHash, token } = useInfo(address);
 
@@ -284,3 +284,5 @@ export default function AccountInformationForDetails ({ accountAssets, address,
     </Grid>
   );
 }
+
+export default React.memo(AccountInformationForDetails);
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx
@@ -17,7 +17,7 @@ import ProfileTabsFullScreen from './partials/ProfileTabsFullScreen';
 import TotalBalancePieChart, { type AssetsWithUiAndPrice } from './partials/TotalBalancePieChart';
 import WatchList from './partials/WatchList';
 
-export default function HomePageFullScreen (): React.ReactElement {
+function HomePageFullScreen (): React.ReactElement {
   useFullscreen();
   const { t } = useTranslation();
 
@@ -92,3 +92,5 @@ export default function HomePageFullScreen (): React.ReactElement {
     </Grid>
   );
 }
+
+export default React.memo(HomePageFullScreen);
diff --git a/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx
@@ -89,7 +89,7 @@ const AccountTotal = ({ currencySign, hideNumbers, totalBalance }: { currencySig
   );
 };
 
-export default function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChild, selectedAsset, setSelectedAsset }: AddressDetailsProps): React.ReactElement {
+function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChild, selectedAsset, setSelectedAsset }: AddressDetailsProps): React.ReactElement {
   const { t } = useTranslation();
   const theme = useTheme();
   const pricesInCurrencies = usePrices();
@@ -260,3 +260,5 @@ export default function AccountInformationForHome ({ accountAssets, address, hid
     </>
   );
 }
+
+export default React.memo(AccountInformationForHome);
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/DraggableAccountList.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/DraggableAccountList.tsx
@@ -24,7 +24,7 @@ export const saveNewOrder = (newOrder: AccountsOrder[]) => {
   chrome.storage.local.set({ addressOrder }).catch(console.error);
 };
 
-export default function DraggableAccountList({ hideNumbers, initialAccountList }: Props) {
+function DraggableAccountList ({ hideNumbers, initialAccountList }: Props) {
   const [accountsOrder, setAccountsOrder] = useState<AccountsOrder[]>(initialAccountList);
   const [quickActionOpen, setQuickActionOpen] = useState<string | boolean>();
 
@@ -67,3 +67,5 @@ export default function DraggableAccountList({ hideNumbers, initialAccountList }
     </DndContext>
   );
 }
+
+export default React.memo(DraggableAccountList);
diff --git a/packages/extension-polkagate/src/popup/home/ManageHome.tsx b/packages/extension-polkagate/src/popup/home/ManageHome.tsx
@@ -7,7 +7,7 @@ import HomePageFullScreen from '../../fullscreen/homeFullScreen';
 import useIsExtensionPopup from '../../hooks/useIsExtensionPopup';
 import Home from '.';
 
-export default function ManageHome (): React.ReactElement {
+function ManageHome (): React.ReactElement {
   const onExtension = useIsExtensionPopup();
   const [home, setHome] = useState<React.ReactElement>(<></>);
 
@@ -21,3 +21,5 @@ export default function ManageHome (): React.ReactElement {
 
   return (home);
 }
+
+export default React.memo(ManageHome);