Improved

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

@@ -128,7 +128,7 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
   const [isScrolled, setIsScrolled] = useState(false);
 
   const { data: socket } = useGlobalSocket();
-  const { data: ptDescCountMap, mutate: mutatePtDescCountMap } = usePageTreeDescCountMap();
+  const { data: ptDescCountMap, update: updatePtDescCountMap } = usePageTreeDescCountMap();
 
 
   // for mutation
@@ -157,11 +157,10 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
     socket.on(SocketEventName.UpdateDescCount, (data: UpdateDescCountRawData) => {
       // save to global state
       const newData: UpdateDescCountData = new Map(Object.entries(data));
-      const oldData: UpdateDescCountData = ptDescCountMap || new Map();
 
-      mutatePtDescCountMap(new Map([...oldData, ...newData]));
+      updatePtDescCountMap(newData);
     });
-  }, [socket, ptDescCountMap, mutatePtDescCountMap]);
+  }, [socket, ptDescCountMap, updatePtDescCountMap]);
 
   const onClickDuplicateMenuItem = (pageToDuplicate: IPageForPageDuplicateModal) => {
     openDuplicateModal(pageToDuplicate);

packages/app/src/stores/ui.tsx

@@ -335,8 +335,17 @@ export const useIsAbleToShowPageAuthors = (): SWRResponse<boolean, Error> => {
   );
 };
 
-export const usePageTreeDescCountMap = (initialData?: UpdateDescCountData): SWRResponse<UpdateDescCountData, Error> => {
+type PageTreeDescCountMapUtils = {
+  update(newData?: UpdateDescCountData): Promise<UpdateDescCountData | undefined>
+}
+
+export const usePageTreeDescCountMap = (initialData?: UpdateDescCountData): SWRResponse<UpdateDescCountData, Error> & PageTreeDescCountMapUtils => {
   const key = 'pageTreeDescCountMap';
 
-  return useStaticSWR(key, initialData, { fallbackData: new Map() });
+  const swrResponse = useStaticSWR<UpdateDescCountData, Error>(key, initialData, { fallbackData: new Map() });
+
+  return {
+    ...swrResponse,
+    update: (newData: UpdateDescCountData) => swrResponse.mutate(new Map([...(swrResponse.data || new Map()), ...newData])),
+  };
 };