fix: update callback when market changes (#1934)

libs/market-depth/src/lib/depth-chart.tsx

@@ -48,7 +48,18 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
     buy: [],
   });
 
-  const updateDepthData = useRef(
+  const {
+    data: market,
+    error: marketError,
+    loading: marketLoading,
+  } = useDataProvider({
+    dataProvider: marketProvider,
+    skipUpdates: true,
+    variables,
+  });
+
+  const updateDepthData = useMemo(
+    () =>
       throttle(() => {
         if (!dataRef.current || !marketDataRef.current || !market) {
           return;
@@ -84,7 +95,8 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
         deltaRef.current.buy = [];
         deltaRef.current.sell = [];
         setDepthData(dataRef.current);
-    }, 1000)
+      }, 1000),
+    [market]
   );
 
   // Apply updates to the table
@@ -107,7 +119,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
         if (delta.buy) {
           deltaRef.current.buy.push(...delta.buy);
         }
-        updateDepthData.current();
+        updateDepthData();
       }
       return true;
     },
@@ -120,16 +132,6 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
     variables,
   });
 
-  const {
-    data: market,
-    error: marketError,
-    loading: marketLoading,
-  } = useDataProvider({
-    dataProvider: marketProvider,
-    skipUpdates: true,
-    variables,
-  });
-
   const marketDataUpdate = useCallback(
     ({ data }: { data: MarketData | null }) => {
       marketDataRef.current = data;
@@ -148,7 +150,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
     variables,
   });
 
-  if (marketDataRef.current && marketData) {
+  if (!marketDataRef.current && marketData) {
     marketDataRef.current = marketData;
   }