Skip to content

Commit e2f3bd5

Browse files
committed
fix: fixed TokenList crash when changing networks (#27655)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Fixes a crash in the `TokenList` component when switching networks. ### Cause of Bug useLayoutEffect with recomputeViewableItems() fires synchronously after FlashList's own useLayoutEffect truncates its internal layouts array to match the new (shorter) data. But FlashList's ViewabilityHelper still holds possiblyViewableIndices from the old (longer) data — those only get reset later via computeItemViewability() in a useEffect. So recomputeViewableItems() iterates stale indices, calls getLayout(index) where index >= layouts.length, and FlashList throws "index out of bounds, not enough layouts". ### Bug Fix Remove the useLayoutEffect. This is safe because extraData already includes isTokenNetworkFilterEqualCurrentNetwork, which triggers FlashList to re-render and internally recompute viewability with valid indices on its own schedule. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: fix TokenList crash when switching networks ## **Related issues** Fixes: #27651 (comment) ## **Manual testing steps** ```gherkin Feature: Token list stability on network switch Scenario: user switches network on "Cash" or "Tokens" token list without crash Given user is on the token list full view with tokens visible When user switches network filter (e.g. "Popular Networks" to "Linea") Then the token list updates without crashing Scenario: user switches network on Tokens full view without crash Given user is on the token list full view with multiple tokens visible When user switches network filter Then the token list updates without crashing ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> <img width="1206" height="2622" alt="image" src="https://github.com/user-attachments/assets/ffe6255f-43c5-4f64-bee7-2b8f03106681" /> ### **After** <!-- [screenshots/recordings] --> https://github.com/user-attachments/assets/21d332be-13b6-4e2a-a378-2a1afa1a54c5 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/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] > **Low Risk** > Small UI lifecycle change limited to `TokenList`; risk is low but could affect how quickly FlashList updates viewability after network/filter changes. > > **Overview** > Prevents a crash when changing networks by removing the `useLayoutEffect` that forced `FlashList` to call `recomputeViewableItems()` when the token network filter/current network equality changed. > > This also drops the unused `useLayoutEffect` import, leaving list updates to normal `FlashList` rendering and `extraData` updates. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 67fa172. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent beb2bfa commit e2f3bd5

1 file changed

Lines changed: 0 additions & 5 deletions

File tree

app/components/UI/Tokens/TokenList/TokenList.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {
22
useCallback,
3-
useLayoutEffect,
43
useRef,
54
useMemo,
65
useEffect,
@@ -84,10 +83,6 @@ const TokenListComponent = ({
8483
const navigation = useNavigation();
8584
const { trackEvent, createEventBuilder } = useAnalytics();
8685

87-
useLayoutEffect(() => {
88-
listRef.current?.recomputeViewableItems();
89-
}, [isTokenNetworkFilterEqualCurrentNetwork]);
90-
9186
// Apply maxItems limit if specified
9287
const displayTokenKeys = useMemo(
9388
() => (tokenKeys || []).slice(0, maxItems || undefined),

0 commit comments

Comments
 (0)