From 06ea58555efac605b35f1b8ce79021da9cf3d400 Mon Sep 17 00:00:00 2001
From: John Walley <john@walley.org.uk>
Date: Wed, 16 Nov 2022 04:08:39 +0000
Subject: [PATCH] fix: update callback when market changes (#1934)

---
 libs/market-depth/src/lib/depth-chart.tsx | 98 ++++++++++++-----------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/libs/market-depth/src/lib/depth-chart.tsx b/libs/market-depth/src/lib/depth-chart.tsx
index dd4656043..2978b183f 100644
--- a/libs/market-depth/src/lib/depth-chart.tsx
+++ b/libs/market-depth/src/lib/depth-chart.tsx
@@ -48,43 +48,55 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
     buy: [],
   });
 
-  const updateDepthData = useRef(
-    throttle(() => {
-      if (!dataRef.current || !marketDataRef.current || !market) {
-        return;
-      }
-      dataRef.current = {
-        ...dataRef.current,
-        midPrice: marketDataRef.current?.staticMidPrice
-          ? formatMidPrice(
-              marketDataRef.current?.staticMidPrice,
-              market.decimalPlaces
-            )
-          : undefined,
-        data: {
-          buy: deltaRef.current.buy
-            ? updateLevels(
-                dataRef.current.data.buy,
-                deltaRef.current.buy,
-                market.decimalPlaces,
-                market.positionDecimalPlaces,
-                true
+  const {
+    data: market,
+    error: marketError,
+    loading: marketLoading,
+  } = useDataProvider({
+    dataProvider: marketProvider,
+    skipUpdates: true,
+    variables,
+  });
+
+  const updateDepthData = useMemo(
+    () =>
+      throttle(() => {
+        if (!dataRef.current || !marketDataRef.current || !market) {
+          return;
+        }
+        dataRef.current = {
+          ...dataRef.current,
+          midPrice: marketDataRef.current?.staticMidPrice
+            ? formatMidPrice(
+                marketDataRef.current?.staticMidPrice,
+                market.decimalPlaces
               )
-            : dataRef.current.data.buy,
-          sell: deltaRef.current.sell
-            ? updateLevels(
-                dataRef.current.data.sell,
-                deltaRef.current.sell,
-                market.decimalPlaces,
-                market.positionDecimalPlaces
-              )
-            : dataRef.current.data.sell,
-        },
-      };
-      deltaRef.current.buy = [];
-      deltaRef.current.sell = [];
-      setDepthData(dataRef.current);
-    }, 1000)
+            : undefined,
+          data: {
+            buy: deltaRef.current.buy
+              ? updateLevels(
+                  dataRef.current.data.buy,
+                  deltaRef.current.buy,
+                  market.decimalPlaces,
+                  market.positionDecimalPlaces,
+                  true
+                )
+              : dataRef.current.data.buy,
+            sell: deltaRef.current.sell
+              ? updateLevels(
+                  dataRef.current.data.sell,
+                  deltaRef.current.sell,
+                  market.decimalPlaces,
+                  market.positionDecimalPlaces
+                )
+              : dataRef.current.data.sell,
+          },
+        };
+        deltaRef.current.buy = [];
+        deltaRef.current.sell = [];
+        setDepthData(dataRef.current);
+      }, 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;
   }