Alert / Notification: Transition to useNotification Hook in Ant Design 5.x

Recommended Implementation

To deliver non-intrusive feedback in Ant Design 5.x while minimizing noise, use the useNotification hook wrapped within the App component. This ensures theme consistency and provides a context-aware API for managing transient messages.

Implementation Steps

1. Wrap the Application: Enclose your root component in the <App> wrapper. This is required for useNotification to inherit the current design tokens and theme configuration.
2. Initialize the Hook: Call const { notification } = App.useApp(); (or useNotification) within your functional component to access the notification API.
3. Prevent Duplicates: Assign a unique key to each notification type. If a new notification is triggered with an existing key, Ant Design updates the current notice rather than stacking a duplicate.
4. Optimize for Small Screens: Set a concise duration (e.g., 3–5 seconds) and use placement="top" to keep alerts visible without obstructing central UI elements.

Notification vs. Alert: Selection Logic

Feature	Notification (useNotification)	Alert
Behavior	Transient, floating overlay	Static, inline layout element
Use Case	App-wide feedback (e.g., "Settings Saved")	Contextual status (e.g., "Invalid Input")
Persistence	Auto-dismisses via duration	Stays until removed from DOM

Technical Considerations and Assumptions

Theme Inheritance: It is assumed you are using Ant Design 5.x's CSS-in-JS system. Using the legacy notification.open static method bypasses the React context, meaning notifications may fail to reflect dynamic theme changes unless configured globally via a ConfigProvider.

Key Collision: Be cautious with key reuse. If two unrelated components use the same key, one notification will overwrite the other, potentially hiding critical feedback.

Verification

To verify the implementation, execute the following checks:

• Duplicate Check: Call notification.open twice with the same key; only one notification should be visible.
• Theme Check: Change a theme token in your ConfigProvider and trigger a notification to ensure the colors update accordingly.
• Layout Check: Trigger a notification on a mobile viewport to ensure the placement does not overlap fixed headers.