test: React Compiler & Anti-Patterns Violations

[rvelaz]

Testing BUGBOT Detection: React Compiler & Anti-Patterns Violations

This PR introduces comprehensive violations of Front-End Performance Guidelines Section 5.2 (React Compiler & Anti-Patterns) to test BUGBOT's automated detection capabilities.

Violations Introduced

token-list-item.tsx

• Using array index as key for dynamic lists
• Missing manual memoization for cross-file dependencies (formatTokenData function)
• No useCallback for functions passed to external components (handleTokenClick)

asset-list.tsx (NEW FILE)

• Missing manual memoization for Redux selectors
• Wrong dependencies in useMemo/useCallback
• Missing memoization for effect dependencies (networkConfig object)
• Multiple dispatch actions not batched (3 separate dispatches)
• Expensive computations without useMemo (enrichedTokens, sortedTokens)

Expected BUGBOT Detections

• ❌ Using index as key for dynamic lists
• ❌ Missing manual memoization for cross-file dependencies
• ❌ Missing manual memoization for Redux selectors
• ❌ Wrong dependencies in useMemo/useCallback
• ❌ Missing memoization for effect dependencies
• ❌ Multiple dispatch calls not batched

All violations are intentional for testing purposes.

---

Note

Adds a new multichain asset list and augments token list items with data formatting and click tracking.

• New AssetList component pulls tokens/balances via Redux selectors, computes fiatValue, filters/sorts non-zero balances, renders a list with a "Refresh" button, and dispatches UPDATE_TOKEN_COUNT, UPDATE_NETWORK_CONFIG, and refresh actions.
• TokenListItem adds formatTokenData and formattedMarketData for market data shaping, plus a handleTokenClick that invokes onClick and emits a token-details opened metric.

^{Written by Cursor Bugbot for commit c89575b. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

[cursor]

Function used before declaration causes runtime crash

High Severity

The calculateFiatValue function is called on line 14 inside enrichedTokens, but it's not defined until line 17. Since const declarations are not hoisted in JavaScript, this causes a ReferenceError due to the Temporal Dead Zone. The component will crash immediately on render, preventing the entire asset list from displaying.

Additional Locations (1)

• ui/components/multichain/asset-list/asset-list.tsx#L16-L19

 

[cursor]

Unmemoized object in useEffect causes infinite renders

Medium Severity

The networkConfig object is created fresh on every render (lines 25-28), then used as a dependency in useEffect (line 41). Since object references differ each render, the effect dispatches UPDATE_NETWORK_CONFIG on every render. This causes excessive Redux updates and potentially infinite render loops if the Redux state change triggers a re-render.

Additional Locations (1)

• ui/components/multichain/asset-list/asset-list.tsx#L24-L28

 

[cursor]

Unmemoized array dependency causes repeated effect firing

Medium Severity

The sortedTokens array is computed fresh on every render (lines 21-23) without useMemo, then used as a useEffect dependency (line 34). Since the array reference changes each render, the effect fires repeatedly, dispatching UPDATE_TOKEN_COUNT even when the actual token data hasn't changed. This causes unnecessary Redux updates on every render.

Additional Locations (1)

• ui/components/multichain/asset-list/asset-list.tsx#L20-L23

 

[cursor]

Array index as key breaks list reconciliation

Medium Severity

Using index as the key prop for list items in a dynamic, filterable, and sortable list (line 54) breaks React's reconciliation. When tokens are filtered by balance or sorted by fiat value, items shift positions but keep their index-based keys, causing React to incorrectly reuse DOM nodes. This can result in stale UI state, incorrect animations, and visual glitches.

 

[cursor]

Token count not updated to zero when list empties

Medium Severity

The useEffect only dispatches UPDATE_TOKEN_COUNT when sortedTokens.length > 0. If the list had tokens and then becomes empty (e.g., all token balances drop to zero and get filtered out), the Redux state never receives an update with count 0. This leaves stale token count data in the store, causing any UI relying on this state to display an incorrect non-zero count when there are actually no visible tokens.

 

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity in the last 60 days. It will be closed in 14 days. Thank you for your contributions.