Add immer

apps/trading/hooks/use-markets.ts

@@ -1,4 +1,5 @@
 import { gql, useApolloClient } from '@apollo/client';
+import produce from 'immer';
 import {
   Markets,
   Markets_markets,
@@ -68,17 +69,14 @@ export const useMarkets = (): UseMarkets => {
   const [loading, setLoading] = useState(false);
 
   const mergeMarketData = useCallback((update: MarketDataSub_marketData) => {
-    setMarkets((curr) => {
+    setMarkets((curr) =>
-      return curr.map((m) => {
+      produce(curr, (draft) => {
-        if (update.market.id === m.id) {
+        const index = draft.findIndex((m) => m.id === update.market.id);
-          return {
+        if (index !== -1) {
-            ...m,
+          draft[index].data = update;
-            data: update,
-          };
         }
-        return m;
+      })
-      });
+    );
-    });
   }, []);
 
   // Make initial fetch

package.json

@@ -38,6 +38,7 @@
     "graphql": "^15.7.2",
     "graphql-ws": "^5.6.3",
     "lodash": "^4.17.21",
+    "immer": "^9.0.12",
     "next": "12.0.7",
     "nx": "^13.8.3",
     "postcss": "^8.4.6",

yarn.lock

@@ -12124,6 +12124,11 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
+immer@^9.0.12:
+  version "9.0.12"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20"
+  integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==
+
 immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"