fix: PerpsMarketList navigation, and performance optimizations in TabList cp-7.59.0 (#22341)

## **Description**

Navigating from a subsection in the PerpHomeScreen should navigate to
the proper tab in the MarketList. This PR also introduces some
performance optimizations in the horizontal scroll view by memoizing
list items to reduce the memory footprint, leading to a snappier
behavior.

If we want further optimizations, we can remove swipe navigation, in
favor of just pressing the tabs and leaning into lazy loading more.

## **Changelog**

CHANGELOG entry: Fix PerpsMarketList navigation and improve performance
on swipeable list view

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2039

## **Manual testing steps**

```gherkin
Feature: Perps Market List Tab Navigation

  Scenario: user navigates to Stocks tab from home screen Explore stocks and commodities section
    Given user is on the Perps home screen
    And the "Explore stocks and commodities" section is visible

    When user taps "See all" in the "Explore stocks and commodities" section
    Then user is navigated to the Perps market list screen
    And the "Stocks" tab is selected
    And stocks and commodities markets are displayed

  Scenario: user navigates to Crypto tab from home screen Explore crypto section
    Given user is on the Perps home screen
    And the "Explore crypto" section is visible

    When user taps "See all" in the "Explore crypto" section
    Then user is navigated to the Perps market list screen
    And the "Crypto" tab is selected
    And crypto markets are displayed

  Scenario: user switches tabs by tapping tab bar
    Given user is on the Perps market list screen
    And the "All" tab is currently selected
    And the market list is scrolled to the middle

    When user taps the "Crypto" tab
    Then the "Crypto" tab becomes active
    And only crypto markets are displayed
    And the market list is scrolled to the top
    And no performance lag is observed

  Scenario: user switches tabs by swiping
    Given user is on the Perps market list screen
    And the "All" tab is currently selected

    When user swipes left on the market list
    Then the "Crypto" tab becomes active
    And the tab bar indicator animates to "Crypto"
    And only crypto markets are displayed
    And the swipe gesture is smooth without stuttering

  Scenario: user swipes between multiple tabs quickly
    Given user is on the Perps market list screen
    And the "All" tab is currently selected

    When user swipes left to the "Crypto" tab
    And user swipes left again to the "Stocks" tab
    Then the "Stocks" tab becomes active
    And the tab bar indicator animates smoothly to "Stocks"
    And stocks and commodities markets are displayed
    And tab switching is instant without noticeable delay

  Scenario: user returns to previously viewed tab
    Given user is on the Perps market list screen
    And the "Crypto" tab is currently selected
    And user has previously viewed the "All" tab

    When user taps the "All" tab
    Then the "All" tab becomes active
    And all markets (crypto, stocks, and commodities) are displayed
    And the market list is scrolled to the top
    And no re-rendering delay is observed

  Scenario: user applies sub-filter on Stocks tab
    Given user is on the Perps market list screen
    And the "Stocks" tab is currently selected
    And both stocks and commodities are displayed

    When user taps the stocks/commodities filter dropdown
    And user selects "Stocks only"
    Then only equity markets are displayed
    And commodity markets are hidden
    And the filter updates instantly

  Scenario: user switches away from Stocks tab with active sub-filter
    Given user is on the Perps market list screen
    And the "Stocks" tab is currently selected
    And the sub-filter is set to "Stocks only"

    When user taps the "Crypto" tab
    And user taps back to the "Stocks" tab
    Then the "Stocks" tab becomes active
    And the sub-filter is reset to "All"
    And both stocks and commodities are displayed
```

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/9b8c5278-018a-4a42-89b6-ef0cbd3b647a

## **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]
> Routes "See all" to the correct market tab and refactors
MarketListView with swipe/tab sync fixes, simplified filtering, and
memoized row items for better performance.
> 
> - **Perps Home & Sections**:
> - `PerpsHomeView`: pass `marketType="stocks_and_commodities"` to
Stocks & Commodities section.
> - `PerpsMarketTypeSection`: support
`marketType="stocks_and_commodities"`; on "See All" navigate with
`defaultMarketTypeFilter` set to provided `marketType`.
> - **Market List View**:
> - Simplify tab filtering: introduce `displayMarkets` applying
sub-filter only on `stocks_and_commodities`; replace checks/usages from
`filteredMarkets` → `displayMarkets`.
> - Tabs rendering: inline tab content; remove
`getFilteredMarketsForTab`/`MarketTypeTabContent` and `tabsToRender`.
> - Swipe/tab sync: add `isScrollingProgrammatically` guard; sync
`ScrollView` position on tab change; handle scroll to update
`marketTypeFilter` without feedback loops.
> - Active tab mapping: include `stocks_and_commodities` and legacy
`equity`/`commodity`.
> - Update measurement and event tracking conditions to use
`displayMarkets.length`.
> - **Performance**:
>   - `PerpsMarketRowItem`: export as `React.memo` to reduce re-renders.
> - **Tests**:
> - Update navigation assertions in `PerpsMarketTypeSection.test.tsx` to
expect specific `defaultMarketTypeFilter`.
> - Adjust `PerpsMarketRowItem.test.tsx` rerenders to pass new props
copies.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5921889. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: abretonc7s <107169956+abretonc7s@users.noreply.github.com>
Co-authored-by: Arthur Breton <arthur.breton@consensys.net>
Co-authored-by: Nicholas Smith <nick.smith@consensys.net>
Co-authored-by: dylanbutler1 <99672693+dylanbutler1@users.noreply.github.com>

Author: 4 people

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx

@@ -258,7 +258,7 @@ const PerpsHomeView = () => {
         <PerpsMarketTypeSection
           title={strings('perps.home.stocks_and_commodities')}
           markets={stocksAndCommoditiesMarkets}
-          marketType="all"
+          marketType="stocks_and_commodities"
           sortBy={sortBy}
           isLoading={isLoading.markets}
         />

app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx

@@ -74,6 +74,7 @@ const PerpsMarketListView = ({
 
   const fadeAnimation = useRef(new Animated.Value(0)).current;
   const tabScrollViewRef = useRef<ScrollView>(null);
+  const isScrollingProgrammatically = useRef(false);
   const [isSortFieldSheetVisible, setIsSortFieldSheetVisible] = useState(false);
   const [isStocksCommoditiesSheetVisible, setIsStocksCommoditiesSheetVisible] =
     useState(false);
@@ -132,83 +133,20 @@ const PerpsMarketListView = ({
     [onMarketSelect, perpsNavigation, route.params?.source],
   );
 
-  // Get filtered markets for specific tab (used within each tab)
-  const getFilteredMarketsForTab = useCallback(
-    (filter: 'all' | 'crypto' | 'stocks_and_commodities') => {
-      if (searchQuery.trim()) {
-        // When searching, show all search results (filtering handled by search)
-        return filteredMarkets;
-      }
-
-      // Filter by tab when not searching
-      if (filter === 'all') {
-        // All = Crypto + Stocks + Commodities (excluding forex)
-        return filteredMarkets.filter(
-          (m) =>
-            !m.marketType ||
-            m.marketType === 'equity' ||
-            m.marketType === 'commodity',
-        );
-      }
-      if (filter === 'crypto') {
-        // Crypto markets have no marketType set
-        return filteredMarkets.filter((m) => !m.marketType);
-      }
-      if (filter === 'stocks_and_commodities') {
-        // Combined stocks and commodities filter - apply sub-filter
-        let stocksCommoditiesMarkets = filteredMarkets.filter(
-          (m) => m.marketType === 'equity' || m.marketType === 'commodity',
-        );
-
-        // Apply stocks/commodities sub-filter if not 'all'
-        if (stocksCommoditiesFilter !== 'all') {
-          stocksCommoditiesMarkets = stocksCommoditiesMarkets.filter(
-            (m) => m.marketType === stocksCommoditiesFilter,
-          );
-        }
-
-        return stocksCommoditiesMarkets;
-      }
-      return filteredMarkets;
-    },
-    [filteredMarkets, searchQuery, stocksCommoditiesFilter],
-  );
-
-  // Market type tab content component (filters markets by tab type)
-  // tabLabel is extracted by TabsList component for display, not used here
-  const MarketTypeTabContent = useCallback(
-    ({
-      tabFilter,
-      tabLabel: _tabLabel,
-    }: {
-      tabFilter: 'all' | 'crypto' | 'stocks_and_commodities';
-      tabLabel: string;
-    }) => {
-      const tabMarkets = getFilteredMarketsForTab(tabFilter);
-      return (
-        <Animated.View
-          style={[styles.animatedListContainer, { opacity: fadeAnimation }]}
-        >
-          <PerpsMarketList
-            markets={tabMarkets}
-            onMarketPress={handleMarketPress}
-            sortBy={sortBy}
-            showBadge={false}
-            contentContainerStyle={styles.tabContentContainer}
-            testID={`${PerpsMarketListViewSelectorsIDs.MARKET_LIST}-${tabFilter}`}
-          />
-        </Animated.View>
+  // Apply stocks/commodities sub-filter when on Stocks tab
+  const displayMarkets = useMemo(() => {
+    // If on stocks_and_commodities tab and sub-filter is active, apply it
+    if (
+      marketTypeFilter === 'stocks_and_commodities' &&
+      stocksCommoditiesFilter !== 'all'
+    ) {
+      return filteredMarkets.filter(
+        (m) => m.marketType === stocksCommoditiesFilter,
       );
-    },
-    [
-      getFilteredMarketsForTab,
-      handleMarketPress,
-      sortBy,
-      fadeAnimation,
-      styles.animatedListContainer,
-      styles.tabContentContainer,
-    ],
-  );
+    }
+    // Otherwise, use markets already filtered by the hook
+    return filteredMarkets;
+  }, [filteredMarkets, marketTypeFilter, stocksCommoditiesFilter]);
 
   // Build tabs data for TabsBar
   const tabsData = useMemo(() => {
@@ -249,19 +187,6 @@ const PerpsMarketListView = ({
     return tabs;
   }, [marketCounts]);
 
-  // Build tab content components
-  const tabsToRender = useMemo(
-    () =>
-      tabsData.map((tab) => (
-        <MarketTypeTabContent
-          key={tab.key}
-          tabFilter={tab.filter}
-          tabLabel={tab.label}
-        />
-      )),
-    [tabsData, MarketTypeTabContent],
-  );
-
   // Calculate active tab index from current marketTypeFilter
   const activeTabIndex = useMemo(() => {
     if (tabsData.length === 0) {
@@ -294,9 +219,14 @@ const PerpsMarketListView = ({
     [tabsData, setMarketTypeFilter],
   );
 
-  // Handle scroll to sync active tab
+  // Handle scroll to sync active tab (for swipe gestures)
   const handleScroll = useCallback(
     (event: { nativeEvent: { contentOffset: { x: number } } }) => {
+      // Ignore programmatic scrolls to prevent feedback loop with useEffect
+      if (isScrollingProgrammatically.current) {
+        return;
+      }
+
       const offsetX = event.nativeEvent.contentOffset.x;
       const index = Math.round(offsetX / containerWidth);
       if (index >= 0 && index < tabsData.length) {
@@ -309,29 +239,34 @@ const PerpsMarketListView = ({
     [containerWidth, tabsData, marketTypeFilter, setMarketTypeFilter],
   );
 
-  // Sync scroll position when active tab changes (e.g., from navigation param)
+  // Sync scroll position when active tab changes (e.g., from tab bar press or navigation param)
   useEffect(() => {
     if (
       tabScrollViewRef.current &&
       activeTabIndex >= 0 &&
       tabsData.length > 0
     ) {
+      isScrollingProgrammatically.current = true;
       tabScrollViewRef.current.scrollTo({
         x: activeTabIndex * containerWidth,
         animated: true,
       });
+      // Clear flag after animation completes (~300ms animation + 50ms buffer)
+      setTimeout(() => {
+        isScrollingProgrammatically.current = false;
+      }, 350);
     }
   }, [activeTabIndex, containerWidth, tabsData.length]);
 
   useEffect(() => {
-    if (filteredMarkets.length > 0) {
+    if (displayMarkets.length > 0) {
       Animated.timing(fadeAnimation, {
         toValue: 1,
         duration: 300,
         useNativeDriver: true,
       }).start();
     }
-  }, [filteredMarkets.length, fadeAnimation]);
+  }, [displayMarkets.length, fadeAnimation]);
 
   // Reset stocks/commodities filter to 'all' when switching tabs
   // This ensures that when switching to the Stocks tab, it always shows both stocks and commodities
@@ -364,15 +299,15 @@ const PerpsMarketListView = ({
   // Performance tracking: Measure screen load time until market data is displayed
   usePerpsMeasurement({
     traceName: TraceName.PerpsMarketListView,
-    conditions: [filteredMarkets.length > 0],
+    conditions: [displayMarkets.length > 0],
   });
 
   // Track markets screen viewed event
   const source =
     route.params?.source || PerpsEventValues.SOURCE.MAIN_ACTION_BUTTON;
   usePerpsEventTracking({
     eventName: MetaMetricsEvents.PERPS_SCREEN_VIEWED,
-    conditions: [filteredMarkets.length > 0],
+    conditions: [displayMarkets.length > 0],
     properties: {
       [PerpsEventProperties.SCREEN_TYPE]: PerpsEventValues.SCREEN_TYPE.MARKETS,
       [PerpsEventProperties.SOURCE]: source,
@@ -397,7 +332,7 @@ const PerpsMarketListView = ({
     }
 
     // Error (Failed to load markets)
-    if (error && filteredMarkets.length === 0) {
+    if (error && displayMarkets.length === 0) {
       return (
         <View style={styles.errorContainer}>
           <Text
@@ -415,7 +350,7 @@ const PerpsMarketListView = ({
     }
 
     // Empty favorites results - show when favorites filter is active but no favorites found
-    if (showFavoritesOnly && filteredMarkets.length === 0) {
+    if (showFavoritesOnly && displayMarkets.length === 0) {
       return (
         <View style={styles.emptyStateContainer}>
           <Icon
@@ -443,7 +378,7 @@ const PerpsMarketListView = ({
     }
 
     // Empty search results - show when search is visible and no markets match
-    if (isSearchVisible && filteredMarkets.length === 0) {
+    if (isSearchVisible && displayMarkets.length === 0) {
       return (
         <View style={styles.emptyStateContainer}>
           <Icon
@@ -478,7 +413,7 @@ const PerpsMarketListView = ({
         style={[styles.animatedListContainer, { opacity: fadeAnimation }]}
       >
         <PerpsMarketList
-          markets={filteredMarkets}
+          markets={displayMarkets}
           onMarketPress={handleMarketPress}
           sortBy={sortBy}
           showBadge={false}
@@ -518,7 +453,7 @@ const PerpsMarketListView = ({
               tabs={tabsData.map((tab) => ({
                 key: tab.key,
                 label: tab.label,
-                content: null, // Content is rendered separately in ScrollView
+                content: null,
                 isDisabled: false,
               }))}
               activeIndex={activeTabIndex}
@@ -527,7 +462,7 @@ const PerpsMarketListView = ({
             />
 
             {/* Filter Bar - Between tabs and content */}
-            {(filteredMarkets.length > 0 || showFavoritesOnly) && (
+            {(displayMarkets.length > 0 || showFavoritesOnly) && (
               <PerpsMarketFiltersBar
                 selectedOptionId={selectedOptionId}
                 onSortPress={() => setIsSortFieldSheetVisible(true)}
@@ -542,7 +477,7 @@ const PerpsMarketListView = ({
               />
             )}
 
-            {/* Tab Content - Scrollable */}
+            {/* Tab Content - Swipeable */}
             <ScrollView
               ref={tabScrollViewRef}
               horizontal
@@ -555,26 +490,40 @@ const PerpsMarketListView = ({
               }}
               style={styles.tabScrollView}
             >
-              {tabsToRender.map((tabContent, index) => (
+              {tabsData.map((tab) => (
                 <View
-                  key={tabsData[index]?.key || index}
+                  key={tab.key}
                   style={[
                     styles.tabContentContainer,
                     { width: containerWidth },
                   ]}
                 >
-                  {tabContent}
+                  <Animated.View
+                    style={[
+                      styles.animatedListContainer,
+                      { opacity: fadeAnimation },
+                    ]}
+                  >
+                    <PerpsMarketList
+                      markets={displayMarkets}
+                      onMarketPress={handleMarketPress}
+                      sortBy={sortBy}
+                      showBadge={false}
+                      contentContainerStyle={styles.tabContentContainer}
+                      testID={`${PerpsMarketListViewSelectorsIDs.MARKET_LIST}-${tab.filter}`}
+                    />
+                  </Animated.View>
                 </View>
               ))}
             </ScrollView>
           </View>
         )}
 
-      {/* Market list hidden when tabs are shown (tabs contain the list) */}
+      {/* Market list when no tabs shown (rare case) */}
       {!isSearchVisible &&
         !isLoadingMarkets &&
         !error &&
-        tabsToRender.length === 0 && (
+        tabsData.length === 0 && (
           <View style={styles.listContainerWithTabBar}>
             {renderMarketList()}
           </View>

app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.test.tsx

@@ -390,21 +390,21 @@ describe('PerpsMarketRowItem', () => {
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 750000000 },
       });
-      rerender(<PerpsMarketRowItem market={mockMarketData} />);
+      rerender(<PerpsMarketRowItem market={{ ...mockMarketData }} />);
       expect(screen.getByText('$750.00M')).toBeOnTheScreen(); // M shows 2 decimals
 
       // Test thousands (0 decimals with formatVolume)
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 50000 },
       });
-      rerender(<PerpsMarketRowItem market={mockMarketData} />);
+      rerender(<PerpsMarketRowItem market={{ ...mockMarketData }} />);
       expect(screen.getByText('$50K')).toBeOnTheScreen(); // K shows no decimals
 
       // Test small values (2 decimals with formatVolume)
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 123.45 },
       });
-      rerender(<PerpsMarketRowItem market={mockMarketData} />);
+      rerender(<PerpsMarketRowItem market={{ ...mockMarketData }} />);
       expect(screen.getByText('$123.45')).toBeOnTheScreen(); // Shows 2 decimals
     });
 

app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.tsx

@@ -211,4 +211,4 @@ const PerpsMarketRowItem = ({
   );
 };
 
-export default PerpsMarketRowItem;
+export default React.memo(PerpsMarketRowItem);

app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.test.tsx

@@ -242,7 +242,7 @@ describe('PerpsMarketTypeSection', () => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
         screen: Routes.PERPS.MARKET_LIST,
         params: {
-          defaultMarketTypeFilter: 'all',
+          defaultMarketTypeFilter: 'crypto',
         },
       });
     });
@@ -261,7 +261,7 @@ describe('PerpsMarketTypeSection', () => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
         screen: Routes.PERPS.MARKET_LIST,
         params: {
-          defaultMarketTypeFilter: 'all',
+          defaultMarketTypeFilter: 'equity',
         },
       });
     });
@@ -280,7 +280,7 @@ describe('PerpsMarketTypeSection', () => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
         screen: Routes.PERPS.MARKET_LIST,
         params: {
-          defaultMarketTypeFilter: 'all',
+          defaultMarketTypeFilter: 'commodity',
         },
       });
     });