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([]); + // memorized shareConfig + const { closeIcon, closable, duration, showProgress, pauseOnHover } = shareConfig; + const memoShareConfig = React.useMemo(() => { + return { + ...shareConfig, + }; + }, [closeIcon, closable, duration, showProgress, pauseOnHover]); + // ========================= Refs ========================= const api = React.useMemo(() => { 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 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 ( + <> + + + {holder} + + ); + }; + + const { getByTestId } = render(); + + 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); + }); + }); });