From b7cb511032adf29a88b1ead82a54619c2328bfdd Mon Sep 17 00:00:00 2001
From: TianHua Liu <61778232+Taoister39@users.noreply.github.com>
Date: Thu, 12 Jun 2025 20:49:39 +0800
Subject: [PATCH] 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 | 19 ++++++-------------
 src/services/noticeService.ts         |  6 ++++--
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/base/NoticeManager.tsx b/src/components/base/NoticeManager.tsx
index b7fedf98..223447a5 100644
--- a/src/components/base/NoticeManager.tsx
+++ b/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);
diff --git a/src/services/noticeService.ts b/src/services/noticeService.ts
index 22ec6b1c..f5ef04ca 100644
--- a/src/services/noticeService.ts
+++ b/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() {