From 2f99256f5567340f081fa4a68f98a26f678a12e1 Mon Sep 17 00:00:00 2001
From: yellworyan <877520264@qq.com>
Date: Sun, 23 Feb 2025 16:31:24 +0800
Subject: [PATCH 1/2] fix: some properties changed by useState are not work

---
 src/hooks/useNotification.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx
index 6b5946a..b250857 100644
--- a/src/hooks/useNotification.tsx
+++ b/src/hooks/useNotification.tsx
@@ -107,11 +107,19 @@ export default function useNotification(
 
   const [taskQueue, setTaskQueue] = React.useState<Task[]>([]);
 
+  // memorized shareConfig
+  const { closeIcon, closable, duration, showProgress, pauseOnHover } = shareConfig;
+  const memoShareConfig = React.useMemo<typeof shareConfig>(() => {
+    return {
+      ...shareConfig,
+    };
+  }, [closeIcon, closable, duration, showProgress, pauseOnHover]);
+
   // ========================= Refs =========================
   const api = React.useMemo<NotificationAPI>(() => {
     return {
       open: (config) => {
-        const mergedConfig = mergeConfig(shareConfig, config);
+        const mergedConfig = mergeConfig(memoShareConfig, config);
         if (mergedConfig.key === null || mergedConfig.key === undefined) {
           mergedConfig.key = `rc-notification-${uniqueKey}`;
           uniqueKey += 1;
@@ -126,7 +134,7 @@ export default function useNotification(
         setTaskQueue((queue) => [...queue, { type: 'destroy' }]);
       },
     };
-  }, []);
+  }, [memoShareConfig]);
 
   // ======================= Container ======================
   // React 18 should all in effect that we will check container in each render

From 3c382f3a1a0de2d8b7f56ad7cc20c1ab06bbfe52 Mon Sep 17 00:00:00 2001
From: yellworyan <877520264@qq.com>
Date: Sun, 23 Feb 2025 16:31:37 +0800
Subject: [PATCH 2/2] test: add test

---
 tests/index.test.tsx | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 4217e31..472b1da 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -849,4 +849,47 @@ describe('Notification.Basic', () => {
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
     });
   });
+
+  describe('Modifying properties through useState can take effect', () => {
+    it('should show notification and disappear after 5 seconds', async () => {
+      const Demo: React.FC = () => {
+        const [duration, setDuration] = React.useState(0);
+        const [api, holder] = useNotification({ duration });
+
+        return (
+          <>
+            <button data-testid="change-duration" onClick={() => setDuration(5)}>
+              change duration
+            </button>
+            <button
+              data-testid="show-notification"
+              onClick={() => {
+                api.open({
+                  content: `Test Notification`,
+                });
+              }}
+            >
+              show notification
+            </button>
+            {holder}
+          </>
+        );
+      };
+
+      const { getByTestId } = render(<Demo />);
+
+      fireEvent.click(getByTestId('show-notification'));
+
+      expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1);
+      fireEvent.click(getByTestId('change-duration'));
+      fireEvent.click(getByTestId('show-notification'));
+      expect(document.querySelectorAll('.rc-notification-notice').length).toBe(2);
+
+      act(() => {
+        vi.advanceTimersByTime(5000);
+      });
+
+      expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1);
+    });
+  });
 });