diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx index b250857..52f0e8d 100644 --- a/src/hooks/useNotification.tsx +++ b/src/hooks/useNotification.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import type { NotificationsProps, NotificationsRef } from '../Notifications'; import Notifications from '../Notifications'; import type { OpenConfig, Placement, StackConfig } from '../interface'; +import { useEvent } from 'rc-util'; const defaultGetContainer = () => document.body; @@ -107,34 +108,29 @@ 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]); + const open = useEvent((config) => { + const mergedConfig = mergeConfig(shareConfig, config); + if (mergedConfig.key === null || mergedConfig.key === undefined) { + mergedConfig.key = `rc-notification-${uniqueKey}`; + uniqueKey += 1; + } - // ========================= Refs ========================= - const api = React.useMemo(() => { - return { - open: (config) => { - const mergedConfig = mergeConfig(memoShareConfig, config); - if (mergedConfig.key === null || mergedConfig.key === undefined) { - mergedConfig.key = `rc-notification-${uniqueKey}`; - uniqueKey += 1; - } + setTaskQueue((queue) => [...queue, { type: 'open', config: mergedConfig }]); + }); - setTaskQueue((queue) => [...queue, { type: 'open', config: mergedConfig }]); - }, + // ========================= Refs ========================= + const api = React.useMemo( + () => ({ + open: open, close: (key) => { setTaskQueue((queue) => [...queue, { type: 'close', key }]); }, destroy: () => { setTaskQueue((queue) => [...queue, { type: 'destroy' }]); }, - }; - }, [memoShareConfig]); + }), + [], + ); // ======================= Container ====================== // React 18 should all in effect that we will check container in each render