My Jetpack: Show the highest-priority global notice first

projects/packages/my-jetpack/_inc/context/notices/noticeContext.tsx

@@ -28,19 +28,23 @@ const NoticeContextProvider = ( { children } ) => {
 	const setNotice = useCallback(
 		// If onClose is not provided in the "notice", and close button is not hidden, use the custom onClose function
 		( notice: Notice, onClose?: NoticeOptions[ 'onClose' ] ) => {
-			// Only update notice if there is not already a notice or the new notice has a higher priority
-			if ( ! currentNotice.message || notice.options.priority > currentNotice.options.priority ) {
-				const newOptions = {
-					...notice.options,
-					onClose:
-						notice.options?.onClose || ( ! notice.options?.hideCloseButton ? onClose : undefined ),
-				};
-
-				resetNotice();
-				setCurrentNotice( { ...notice, options: newOptions } );
-			}
+			const newOptions = {
+				...notice.options,
+				onClose:
+					notice.options?.onClose || ( ! notice.options?.hideCloseButton ? onClose : undefined ),
+			};
+
+			// Replace the notice only if none is showing or the new one has a higher priority. Read the
+			// queued state, since watchers call this several times in one effect pass.
+			setCurrentNotice( prev =>
+				! prev.message || notice.options.priority > prev.options.priority
+					? { ...notice, options: newOptions }
+					: prev
+			);
 		},
-		[ currentNotice.message, currentNotice.options.priority, resetNotice ]
+		// Changing identity on each notice change re-runs the watchers, e.g. to show the next notice after a close.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ currentNotice.message, currentNotice.options.priority ]
 	);
 
 	return (

projects/packages/my-jetpack/_inc/context/notices/test/notice-context.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react';
+import { useContext, useEffect } from 'react';
+import { NOTICE_PRIORITY_HIGH, NOTICE_PRIORITY_MEDIUM } from '../../constants';
+import NoticeContextProvider, { NoticeContext } from '../noticeContext';
+
+describe( 'NoticeContextProvider', () => {
+	it( 'keeps the higher-priority notice when a lower one is set later in the same effect pass', () => {
+		const rendered: string[] = [];
+
+		const Watchers = () => {
+			const { setNotice } = useContext( NoticeContext );
+			useEffect( () => {
+				setNotice( {
+					message: 'High',
+					options: { level: 'error', priority: NOTICE_PRIORITY_HIGH },
+				} );
+				setNotice( {
+					message: 'Medium',
+					options: { level: 'error', priority: NOTICE_PRIORITY_MEDIUM },
+				} );
+			}, [ setNotice ] );
+			return null;
+		};
+
+		const CurrentNotice = () => {
+			const { currentNotice } = useContext( NoticeContext );
+			if ( currentNotice.message ) {
+				rendered.push( String( currentNotice.message ) );
+			}
+			return null;
+		};
+
+		render(
+			<NoticeContextProvider>
+				<Watchers />
+				<CurrentNotice />
+			</NoticeContextProvider>
+		);
+
+		expect( rendered ).toEqual( [ 'High' ] );
+	} );
+} );

projects/packages/my-jetpack/changelog/fix-my-jetpack-notice-priority-stale-state

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Show the highest-priority notice first instead of briefly showing a lower-priority one.