Commit e2f3bd5
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
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | | - | |
4 | 3 | | |
5 | 4 | | |
6 | 5 | | |
| |||
84 | 83 | | |
85 | 84 | | |
86 | 85 | | |
87 | | - | |
88 | | - | |
89 | | - | |
90 | | - | |
91 | 86 | | |
92 | 87 | | |
93 | 88 | | |
| |||
0 commit comments