Use cleanup callback

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -150,21 +150,36 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
     };
   }, []);
 
+  // useEffect(() => {
+  //   if (socket == null) {
+  //     return;
+  //   }
+
+  //   socket.off(SocketEventName.UpdateDescCount, () => {
+
+  //     socket.on(SocketEventName.UpdateDescCount, (data: UpdateDescCountRawData) => {
+  //       // save to global state
+  //       const newData: UpdateDescCountData = new Map(Object.entries(data));
+
+  //       updatePtDescCountMap(newData);
+  //     });
+  //   });
+
+  // }, [socket, ptDescCountMap, updatePtDescCountMap]);
   useEffect(() => {
     if (socket == null) {
       return;
     }
 
-    socket.off(SocketEventName.UpdateDescCount, () => {
-
-      socket.on(SocketEventName.UpdateDescCount, (data: UpdateDescCountRawData) => {
-        // save to global state
-        const newData: UpdateDescCountData = new Map(Object.entries(data));
+    socket.on(SocketEventName.UpdateDescCount, (data: UpdateDescCountRawData) => {
+      // save to global state
+      const newData: UpdateDescCountData = new Map(Object.entries(data));
 
-        updatePtDescCountMap(newData);
-      });
+      updatePtDescCountMap(newData);
     });
 
+    return () => { socket.off(SocketEventName.UpdateDescCount) };
+
   }, [socket, ptDescCountMap, updatePtDescCountMap]);
 
   const onClickDuplicateMenuItem = (pageToDuplicate: IPageForPageDuplicateModal) => {