perf(Notice): replace useState by useSyncExternalStore (#3682)

* fix: the first function call creates multiple axios instances

* perf(Notice): replace useState by useSyncExternalStore

* chore: prettier --check .

* fix: prettier format

src/components/base/NoticeManager.tsx

@@ -1,24 +1,17 @@
-import React, { useState, useEffect } from "react";
+import React, { useSyncExternalStore } from "react";
 import { Snackbar, Alert, IconButton, Box } from "@mui/material";
 import { CloseRounded } from "@mui/icons-material";
 import {
   subscribeNotices,
   hideNotice,
-  NoticeItem,
+  getSnapshotNotices,
 } from "@/services/noticeService";
 
 export const NoticeManager: React.FC = () => {
-  const [currentNotices, setCurrentNotices] = useState<NoticeItem[]>([]);
-
-  useEffect(() => {
-    const unsubscribe = subscribeNotices((notices) => {
-      setCurrentNotices(notices);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
+  const currentNotices = useSyncExternalStore(
+    subscribeNotices,
+    getSnapshotNotices,
+  );
 
   const handleClose = (id: number) => {
     hideNotice(id);

src/services/noticeService.ts

@@ -61,13 +61,15 @@ export function hideNotice(id: number) {
 
 // Subscribes a listener function to notice state changes.
 
-export function subscribeNotices(listener: Listener): () => void {
+export function subscribeNotices(listener: () => void) {
   listeners.add(listener);
-  listener([...notices]);
   return () => {
     listeners.delete(listener);
   };
 }
+export function getSnapshotNotices() {
+  return notices;
+}
 
 // Function to clear all notices at once
 export function clearAllNotices() {