chore: memoize Swaps QuoteRow rendering

app/components/UI/Bridge/components/QuoteSelectorView/QuoteList.test.tsx

@@ -1,23 +1,57 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import { QuoteList } from './QuoteList';
-import { QuoteRowProps } from './QuoteRow';
+import { QuoteRowProps, QuoteRowViewProps } from './QuoteRow';
+import { useSelector } from 'react-redux';
+import { getDisplayCurrencyValue } from '../../utils/exchange-rates';
 
-jest.mock('./QuoteRow', () => ({
-  QuoteRow: ({ provider, quoteRequestId }: QuoteRowProps) => {
+const mockQuoteRowRenderCounts = new Map<string, number>();
+
+jest.mock('./QuoteRow', () => {
+  const ReactActual = jest.requireActual('react');
+
+  function MockQuoteRowView({
+    providerName,
+    quoteRequestId,
+  }: QuoteRowViewProps) {
     const { Text } = jest.requireActual('react-native');
+
+    mockQuoteRowRenderCounts.set(
+      quoteRequestId,
+      (mockQuoteRowRenderCounts.get(quoteRequestId) ?? 0) + 1,
+    );
+
     return (
       <Text testID={`quote-row-${quoteRequestId}`}>
-        {provider.name} - {quoteRequestId}
+        {providerName} - {quoteRequestId}
       </Text>
     );
-  },
+  }
+
+  return {
+    QuoteRowView: ReactActual.memo(MockQuoteRowView),
+  };
+});
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(() => undefined),
+}));
+
+jest.mock('../../utils/exchange-rates', () => ({
+  getDisplayCurrencyValue: jest.fn(() => '$0.00'),
 }));
 
 jest.mock('../../hooks/useShouldRenderGasSponsoredBanner', () => ({
   useShouldRenderGasSponsoredBanner: jest.fn(),
 }));
 
+const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
+const mockGetDisplayCurrencyValue =
+  getDisplayCurrencyValue as jest.MockedFunction<
+    typeof getDisplayCurrencyValue
+  >;
+
 describe('QuoteList', () => {
   const mockOnPress = jest.fn();
 
@@ -33,9 +67,23 @@ describe('QuoteList', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockQuoteRowRenderCounts.clear();
   });
 
   describe('rendering', () => {
+    it('selects currency data once for multiple rows', () => {
+      const quotes = [
+        createMockQuote({ quoteRequestId: 'quote-1' }),
+        createMockQuote({ quoteRequestId: 'quote-2' }),
+        createMockQuote({ quoteRequestId: 'quote-3' }),
+      ];
+
+      render(<QuoteList data={quotes} />);
+
+      expect(mockUseSelector).toHaveBeenCalledTimes(6);
+      expect(mockGetDisplayCurrencyValue).toHaveBeenCalledTimes(3);
+    });
+
     it('renders empty list when data is empty array', () => {
       const { queryByTestId } = render(<QuoteList data={[]} />);
 
@@ -96,6 +144,50 @@ describe('QuoteList', () => {
     });
   });
 
+  describe('memoization', () => {
+    it('does not re-render unchanged rows when one quote changes', () => {
+      // Arrange
+      const quotes = [
+        createMockQuote({
+          provider: { name: 'Lifi' },
+          quoteRequestId: 'quote-1',
+        }),
+        createMockQuote({
+          provider: { name: 'Socket' },
+          quoteRequestId: 'quote-2',
+        }),
+        createMockQuote({
+          provider: { name: 'Hop' },
+          quoteRequestId: 'quote-3',
+        }),
+      ];
+      const { rerender } = render(<QuoteList data={quotes} />);
+      const updatedQuotes = [
+        createMockQuote({
+          provider: { name: 'Lifi' },
+          quoteRequestId: 'quote-1',
+        }),
+        createMockQuote({
+          provider: { name: 'Socket' },
+          quoteRequestId: 'quote-2',
+          formattedTotalCost: '$101.00',
+        }),
+        createMockQuote({
+          provider: { name: 'Hop' },
+          quoteRequestId: 'quote-3',
+        }),
+      ];
+
+      // Act
+      rerender(<QuoteList data={updatedQuotes} />);
+
+      // Assert
+      expect(mockQuoteRowRenderCounts.get('quote-1')).toBe(1);
+      expect(mockQuoteRowRenderCounts.get('quote-2')).toBe(2);
+      expect(mockQuoteRowRenderCounts.get('quote-3')).toBe(1);
+    });
+  });
+
   describe('prop passing', () => {
     it('passes all props to QuoteRow components', () => {
       const quote = createMockQuote({

app/components/UI/Bridge/components/QuoteSelectorView/QuoteList.tsx

@@ -1,9 +1,51 @@
 import React from 'react';
-import { QuoteRow, QuoteRowProps } from './QuoteRow';
+import { useSelector } from 'react-redux';
+import { QuoteRowProps, QuoteRowView } from './QuoteRow';
+import { selectDestToken } from '../../../../../core/redux/slices/bridge';
+import { selectTokenMarketData } from '../../../../../selectors/tokenRatesController';
+import {
+  selectCurrencyRates,
+  selectCurrentCurrency,
+} from '../../../../../selectors/currencyRateController';
+import { selectNetworkConfigurations } from '../../../../../selectors/networkController';
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+import { selectMultichainAssetsRates } from '../../../../../selectors/multichain';
+///: END:ONLY_INCLUDE_IF(keyring-snaps)
+import { getDisplayCurrencyValue } from '../../utils/exchange-rates';
 
 interface Props {
   data: QuoteRowProps[];
 }
 
-export const QuoteList = ({ data }: Props) =>
-  data.map((quote) => <QuoteRow key={quote.quoteRequestId} {...quote} />);
+export const QuoteList = ({ data }: Props) => {
+  const destToken = useSelector(selectDestToken);
+  const evmMultiChainMarketData = useSelector(selectTokenMarketData);
+  const evmMultiChainCurrencyRates = useSelector(selectCurrencyRates);
+  const networkConfigurationsByChainId = useSelector(
+    selectNetworkConfigurations,
+  );
+  const currentCurrency = useSelector(selectCurrentCurrency);
+
+  let nonEvmMultichainAssetRates = {};
+  ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  nonEvmMultichainAssetRates = useSelector(selectMultichainAssetsRates);
+  ///: END:ONLY_INCLUDE_IF(keyring-snaps)
+
+  return data.map(({ provider, ...quote }) => (
+    <QuoteRowView
+      key={quote.quoteRequestId}
+      {...quote}
+      providerName={provider.name}
+      formattedReceiveAmountFiat={getDisplayCurrencyValue({
+        token: destToken,
+        amount: quote.receiveAmount,
+        evmMultiChainMarketData,
+        networkConfigurationsByChainId,
+        evmMultiChainCurrencyRates,
+        currentCurrency,
+        nonEvmMultichainAssetRates,
+      })}
+      destTokenSymbol={destToken?.symbol}
+    />
+  ));
+};

app/components/UI/Bridge/components/QuoteSelectorView/QuoteRow.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
-import { QuoteRow, QuoteRowProps } from './QuoteRow';
+import { QuoteRow, QuoteRowProps, QuoteRowView } from './QuoteRow';
 import { strings } from '../../../../../../locales/i18n';
 import { BridgeToken } from '../../types';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
@@ -77,6 +77,12 @@ describe('QuoteRow', () => {
     });
   });
 
+  describe('memoization', () => {
+    it('memoizes QuoteRowView', () => {
+      expect(QuoteRowView).toHaveProperty('$$typeof', Symbol.for('react.memo'));
+    });
+  });
+
   describe('rendering', () => {
     it('renders provider name', () => {
       // Act