Skip to content

Commit bc0aaeb

Browse files
n3psn3ps
authored
fix: reduce re-renders in account overview tabs (#37358)
## **Description** The `useAssetListTokenDetection` hook causes unnecessary re-renders in Account Overview Tabs, cascading down the component tree This PR extracts this hook [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37358?quickstart=1) ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** ``` {name: 'AccountOverviewTabs', renders: 1, timestamp: '09:15:09'} {name: 'AccountOverviewTabs', renders: 2, timestamp: '09:15:09'} {name: 'AccountOverviewTabs', renders: 3, timestamp: '09:15:09'} {name: 'AccountOverviewTabs', renders: 4, timestamp: '09:15:09'} {name: 'AccountOverviewTabs', renders: 5, timestamp: '09:15:09'} {name: 'AccountOverviewTabs', renders: 6, timestamp: '09:15:09'} ``` ### **After** ``` {name: 'AccountOverviewTabs', renders: 1, timestamp: '09:26:48'} {name: 'AccountOverviewTabs', renders: 2, timestamp: '09:26:48'} ``` ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Extracts token detection hook into a new `AssetListTokenDetection` component and uses it in `AccountOverviewTabs` to reduce unnecessary re-renders. > > - **Account Overview**: > - Add `AssetListTokenDetection` (`ui/components/multichain/account-overview/asset-list-token-detection.tsx`) to encapsulate `useAssetListTokenDetection`. > - Update `account-overview-tabs.tsx`: > - Remove direct `useAssetListTokenDetection` usage; render `AssetListTokenDetection` above `Tabs` to prevent cascading re-renders. > - Minor return structure change (wrap with fragment); tab contents and behavior unchanged. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 5b6bf74. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 1dcc8e2 commit bc0aaeb

File tree

2 files changed

+75
-63
lines changed

2 files changed

+75
-63
lines changed

‎ui/components/multichain/account-overview/account-overview-tabs.tsx‎

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ import {
2020
import { detectNfts } from '../../../store/actions';
2121
import AssetList from '../../app/assets/asset-list';
2222
import DeFiTab from '../../app/assets/defi-list/defi-tab';
23-
import { useAssetListTokenDetection } from '../../app/assets/hooks';
2423
import NftsTab from '../../app/assets/nfts/nfts-tab';
2524
import TransactionList from '../../app/transaction-list';
2625
import UnifiedTransactionList from '../../app/transaction-list/unified-transaction-list.component';
2726
import { Box } from '../../component-library';
2827
import { Tab, Tabs } from '../../ui/tabs';
2928
import { useTokenBalances } from '../../../hooks/useTokenBalances';
3029
import { AccountOverviewCommonProps } from './common';
30+
import { AssetListTokenDetection } from './asset-list-token-detection';
3131

3232
export type AccountOverviewTabsProps = AccountOverviewCommonProps & {
3333
showTokens: boolean;
@@ -52,8 +52,6 @@ export const AccountOverviewTabs = ({
5252
const dispatch = useDispatch();
5353
const selectedChainIds = useSelector(getChainIdsToPoll);
5454

55-
useAssetListTokenDetection();
56-
5755
// EVM specific tokenBalance polling, updates state via polling loop per chainId
5856
useTokenBalances({
5957
chainIds: selectedChainIds as Hex[],
@@ -104,67 +102,71 @@ export const AccountOverviewTabs = ({
104102
const showUnifiedTransactionList = isBIP44FeatureFlagEnabled;
105103

106104
return (
107-
<Tabs<AccountOverviewTabKey>
108-
defaultActiveTabKey={defaultHomeActiveTabName ?? undefined}
109-
onTabClick={handleTabClick}
110-
tabListProps={{
111-
className: 'px-4',
112-
}}
113-
>
114-
{showTokens && (
115-
<Tab
116-
name={t('tokens')}
117-
tabKey={AccountOverviewTabKey.Tokens}
118-
data-testid="account-overview__asset-tab"
119-
>
120-
<Box marginBottom={2}>
121-
<AssetList
122-
showTokensLinks={showTokensLinks ?? true}
123-
onClickAsset={onClickAsset}
124-
safeChains={safeChains}
125-
/>
126-
</Box>
127-
</Tab>
128-
)}
129-
{showDefi && (
130-
<Tab
131-
name={t('defi')}
132-
tabKey={AccountOverviewTabKey.DeFi}
133-
data-testid="account-overview__defi-tab"
134-
>
135-
<Box>
136-
<DeFiTab
137-
showTokensLinks={showTokensLinks ?? true}
138-
onClickAsset={onClickDeFi}
139-
safeChains={safeChains}
140-
/>
141-
</Box>
142-
</Tab>
143-
)}
105+
<>
106+
<AssetListTokenDetection />
107+
108+
<Tabs<AccountOverviewTabKey>
109+
defaultActiveTabKey={defaultHomeActiveTabName ?? undefined}
110+
onTabClick={handleTabClick}
111+
tabListProps={{
112+
className: 'px-4',
113+
}}
114+
>
115+
{showTokens && (
116+
<Tab
117+
name={t('tokens')}
118+
tabKey={AccountOverviewTabKey.Tokens}
119+
data-testid="account-overview__asset-tab"
120+
>
121+
<Box marginBottom={2}>
122+
<AssetList
123+
showTokensLinks={showTokensLinks ?? true}
124+
onClickAsset={onClickAsset}
125+
safeChains={safeChains}
126+
/>
127+
</Box>
128+
</Tab>
129+
)}
130+
{showDefi && (
131+
<Tab
132+
name={t('defi')}
133+
tabKey={AccountOverviewTabKey.DeFi}
134+
data-testid="account-overview__defi-tab"
135+
>
136+
<Box>
137+
<DeFiTab
138+
showTokensLinks={showTokensLinks ?? true}
139+
onClickAsset={onClickDeFi}
140+
safeChains={safeChains}
141+
/>
142+
</Box>
143+
</Tab>
144+
)}
144145

145-
{showNfts && (
146-
<Tab
147-
name={t('nfts')}
148-
tabKey={AccountOverviewTabKey.Nfts}
149-
data-testid="account-overview__nfts-tab"
150-
>
151-
<NftsTab />
152-
</Tab>
153-
)}
146+
{showNfts && (
147+
<Tab
148+
name={t('nfts')}
149+
tabKey={AccountOverviewTabKey.Nfts}
150+
data-testid="account-overview__nfts-tab"
151+
>
152+
<NftsTab />
153+
</Tab>
154+
)}
154155

155-
{showActivity && (
156-
<Tab
157-
name={t('activity')}
158-
tabKey={AccountOverviewTabKey.Activity}
159-
data-testid="account-overview__activity-tab"
160-
>
161-
{showUnifiedTransactionList ? (
162-
<UnifiedTransactionList />
163-
) : (
164-
<TransactionList />
165-
)}
166-
</Tab>
167-
)}
168-
</Tabs>
156+
{showActivity && (
157+
<Tab
158+
name={t('activity')}
159+
tabKey={AccountOverviewTabKey.Activity}
160+
data-testid="account-overview__activity-tab"
161+
>
162+
{showUnifiedTransactionList ? (
163+
<UnifiedTransactionList />
164+
) : (
165+
<TransactionList />
166+
)}
167+
</Tab>
168+
)}
169+
</Tabs>
170+
</>
169171
);
170172
};

‎ui/components/multichain/account-overview/asset-list-token-detection.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { useAssetListTokenDetection } from '../../app/assets/hooks';
2+
3+
/**
4+
* Wraps useAssetListTokenDetection to avoid unnecessary cascading re-renders
5+
*/
6+
export const AssetListTokenDetection = () => {
7+
useAssetListTokenDetection();
8+
9+
return null;
10+
};

0 commit comments

Comments
 (0)