reduce rerenders on tvchartcontainer

components/Orderbook.tsx

@@ -36,7 +36,6 @@ import {
   mangoGroupConfigSelector,
   marketConfigSelector,
   marketSelector,
-  orderbookSelector,
   setStoreSelector,
 } from '../stores/selectors'
 import { Market } from '@project-serum/serum'
@@ -128,7 +127,6 @@ export default function Orderbook({ depth = 8 }) {
   const { t } = useTranslation('common')
   const groupConfig = useMangoStore(mangoGroupConfigSelector)
   const marketConfig = useMangoStore(marketConfigSelector)
-  const orderbook = useMangoStore(orderbookSelector)
   const market = useMangoStore(marketSelector)
   const markPrice = useMarkPrice()
 
@@ -155,17 +153,13 @@ export default function Orderbook({ depth = 8 }) {
   }, [market])
 
   useInterval(() => {
+    const orderbook = useMangoStore.getState().selectedMarket.orderBook
     if (
-      nextOrderbookData?.current?.bids &&
-      (!currentOrderbookData.current ||
-        !isEqualLodash(
-          currentOrderbookData.current.bids,
-          nextOrderbookData.current.bids
-        ) ||
-        !isEqualLodash(
-          currentOrderbookData.current.asks,
-          nextOrderbookData.current.asks
-        ) ||
+      nextOrderbookData?.current &&
+      (!isEqualLodash(
+        currentOrderbookData.current,
+        nextOrderbookData.current
+      ) ||
         previousDepth !== depth ||
         previousGrouping !== grouping)
     ) {
@@ -241,14 +235,19 @@ export default function Orderbook({ depth = 8 }) {
         setOrderbookData(null)
       }
     }
-  }, 500)
+  }, 400)
 
-  useEffect(() => {
-    nextOrderbookData.current = {
-      bids: orderbook?.bids,
-      asks: orderbook?.asks,
-    }
-  }, [orderbook])
+  useEffect(
+    () =>
+      useMangoStore.subscribe(
+        (state) =>
+          (nextOrderbookData.current = {
+            bids: state.selectedMarket.orderBook?.bids,
+            asks: state.selectedMarket.orderBook?.asks,
+          })
+      ),
+    []
+  )
 
   const handleLayoutChange = () => {
     setDefaultLayout(!defaultLayout)

components/TVChartContainer.tsx

@@ -50,7 +50,6 @@ const TVChartContainer = () => {
   )
   const setMangoStore = useMangoStore.getState().set
   const selectedMarketConfig = useMangoStore((s) => s.selectedMarket.config)
-  const openOrders = useMangoStore((s) => s.selectedMangoAccount.openOrders)
   const actions = useMangoStore((s) => s.actions)
   const isMobile = width ? width < breakpoints.sm : false
   const mangoClient = useMangoStore.getState().connection.client
@@ -99,8 +98,10 @@ const TVChartContainer = () => {
         tvWidgetRef.current.activeChart().resolution(),
         () => {
           if (showOrderLines) {
+            const openOrders =
+              useMangoStore.getState().selectedMangoAccount.openOrders
             deleteLines()
-            drawLinesForMarket()
+            drawLinesForMarket(openOrders)
           }
         }
       )
@@ -580,7 +581,7 @@ const TVChartContainer = () => {
     }
   }
 
-  const drawLinesForMarket = () => {
+  const drawLinesForMarket = (openOrders) => {
     const newOrderLines = new Map()
     if (openOrders?.length) {
       for (const { order, market } of openOrders) {
@@ -618,38 +619,46 @@ const TVChartContainer = () => {
 
   // updated order lines if a user's open orders change
   useEffect(() => {
+    let subscription
     if (chartReady && tvWidgetRef?.current) {
-      const orderLines = useMangoStore.getState().tradingView.orderLines
-      tvWidgetRef.current.onChartReady(() => {
-        let matchingOrderLines = 0
-        let openOrdersForMarket = 0
+      subscription = useMangoStore.subscribe(
+        (state) => state.selectedMangoAccount.openOrders,
+        (openOrders) => {
+          const orderLines = useMangoStore.getState().tradingView.orderLines
+          tvWidgetRef.current?.onChartReady(() => {
+            let matchingOrderLines = 0
+            let openOrdersForMarket = 0
 
-        for (const [key] of orderLines) {
-          openOrders?.forEach(({ order }) => {
-            if (order.orderId == key) {
-              matchingOrderLines += 1
+            for (const [key] of orderLines) {
+              openOrders?.forEach(({ order }) => {
+                if (order.orderId == key) {
+                  matchingOrderLines += 1
+                }
+              })
             }
+
+            openOrders?.forEach(({ market }) => {
+              if (market.config.name == selectedMarketName) {
+                openOrdersForMarket += 1
+              }
+            })
+
+            tvWidgetRef.current?.activeChart().dataReady(() => {
+              if (
+                (showOrderLines &&
+                  matchingOrderLines !== openOrdersForMarket) ||
+                orderLines?.size != matchingOrderLines
+              ) {
+                deleteLines()
+                drawLinesForMarket(openOrders)
+              }
+            })
           })
         }
-
-        openOrders?.forEach(({ market }) => {
-          if (market.config.name == selectedMarketName) {
-            openOrdersForMarket += 1
-          }
-        })
-
-        tvWidgetRef.current?.activeChart().dataReady(() => {
-          if (
-            (showOrderLines && matchingOrderLines !== openOrdersForMarket) ||
-            orderLines?.size != matchingOrderLines
-          ) {
-            deleteLines()
-            drawLinesForMarket()
-          }
-        })
-      })
+      )
     }
-  }, [chartReady, openOrders, showOrderLines])
+    return subscription
+  }, [chartReady, showOrderLines, selectedMarketName])
 
   return (
     <div id={defaultProps.container as string} className="tradingview-chart" />

hooks/useOpenOrders.tsx

@@ -9,6 +9,7 @@ import {
   MangoAccount,
   I80F48,
 } from '@blockworks-foundation/mango-client'
+import isEqualLodash from 'lodash/isEqual'
 import { Market, Orderbook } from '@project-serum/serum'
 import { Order } from '@project-serum/serum/lib/market'
 import { PerpTriggerOrder } from '../@types/types'
@@ -164,7 +165,13 @@ export function useOpenOrders() {
   }, [markets, accountInfos, mangoAccount])
 
   useEffect(() => {
-    if (mangoGroup && mangoAccount) {
+    const oldOpenOrders =
+      useMangoStore.getState().selectedMangoAccount.openOrders
+    if (
+      mangoGroup &&
+      mangoAccount &&
+      !isEqualLodash(oldOpenOrders, openOrders)
+    ) {
       setMangoStore((state) => {
         state.selectedMangoAccount.openOrders = openOrders
         state.selectedMangoAccount.totalOpenOrders = openOrders.length