diff --git a/apps/trading/client-pages/market/market-selector.tsx b/apps/trading/client-pages/market/market-selector.tsx
index b5ef9d810..1e6e34204 100644
--- a/apps/trading/client-pages/market/market-selector.tsx
+++ b/apps/trading/client-pages/market/market-selector.tsx
@@ -8,7 +8,7 @@ import {
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import type { CSSProperties } from 'react';
-import { useState } from 'react';
+import { useCallback, useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
@@ -184,7 +184,6 @@ const MarketList = ({
if (error) {
return
{error.message}
;
}
-
return (
{({ width, height }) => (
@@ -204,6 +203,29 @@ const MarketList = ({
);
};
+interface ListItemData {
+ data: MarketMaybeWithDataAndCandles[];
+ onSelect?: (marketId: string) => void;
+ currentMarketId?: string;
+}
+
+const ListItem = ({
+ index,
+ style,
+ data,
+}: {
+ index: number;
+ style: CSSProperties;
+ data: ListItemData;
+}) => (
+
+);
+
const List = ({
data,
loading,
@@ -212,28 +234,20 @@ const List = ({
onSelect,
noItems,
currentMarketId,
-}: {
- data: MarketMaybeWithDataAndCandles[];
+}: ListItemData & {
loading: boolean;
width: number;
height: number;
noItems: string;
- onSelect?: (marketId: string) => void;
- currentMarketId?: string;
}) => {
- const row = ({ index, style }: { index: number; style: CSSProperties }) => {
- const market = data[index];
-
- return (
-
- );
- };
-
+ const itemKey = useCallback(
+ (index: number, data: ListItemData) => data.data[index].id,
+ []
+ );
+ const itemData = useMemo(
+ () => ({ data, onSelect, currentMarketId }),
+ [data, onSelect, currentMarketId]
+ );
if (!data || loading) {
return (
@@ -259,11 +273,13 @@ const List = ({
- {row}
+ {ListItem}
);
};