From 8c446a7c0c5dcc190a20096316bad62dd172af89 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 14 Sep 2022 09:26:17 -0400
Subject: [PATCH 1/2] Component: refactor Notice to pass `exhaustive-deps`

---
 .../components/src/notice/index.native.js     | 37 +++++++++----------
 packages/components/src/notice/list.native.js | 10 +++--
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/components/src/notice/index.native.js b/packages/components/src/notice/index.native.js
index 72910b17620c5f..b2f2eb75c9435a 100644
--- a/packages/components/src/notice/index.native.js
+++ b/packages/components/src/notice/index.native.js
@@ -14,7 +14,7 @@ import { BlurView } from '@react-native-community/blur';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, Platform } from '@wordpress/element';
+import { useEffect, useRef, useCallback, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -30,40 +30,37 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 	const timer = useRef( null );
 
 	useEffect( () => {
-		startAnimation();
-
-		return () => {
-			clearTimeout( timer?.current );
-		};
-	}, [] );
-
-	function onHide() {
+		// start animation
 		Animated.timing( animationValue, {
-			toValue: 0,
-			duration: 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
 		} ).start( ( { finished } ) => {
 			if ( finished && onNoticeHidden ) {
-				onNoticeHidden( id );
+				timer.current = setTimeout( () => {
+					onHide();
+				}, HIDE_TIMER );
 			}
 		} );
-	}
 
-	function startAnimation() {
+		return () => {
+			clearTimeout( timer?.current );
+		};
+	}, [ animationValue, onHide, onNoticeHidden ] );
+
+	const onHide = useCallback( () => {
 		Animated.timing( animationValue, {
-			toValue: 1,
-			duration: 300,
+			toValue: 0,
+			duration: 150,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
 		} ).start( ( { finished } ) => {
 			if ( finished && onNoticeHidden ) {
-				timer.current = setTimeout( () => {
-					onHide();
-				}, HIDE_TIMER );
+				onNoticeHidden( id );
 			}
 		} );
-	}
+	}, [ animationValue, onNoticeHidden, id ] );
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,
diff --git a/packages/components/src/notice/list.native.js b/packages/components/src/notice/list.native.js
index bf067a0942fd6e..72a4c743108995 100644
--- a/packages/components/src/notice/list.native.js
+++ b/packages/components/src/notice/list.native.js
@@ -14,6 +14,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import Notice from './';
 import styles from './style.scss';
+import { useCallback } from '@wordpress/element';
 
 function NoticeList() {
 	const { notices } = useSelect( ( select ) => {
@@ -25,9 +26,12 @@ function NoticeList() {
 
 	const { removeNotice } = useDispatch( noticesStore );
 
-	function onRemoveNotice( id ) {
-		removeNotice( id );
-	}
+	const onRemoveNotice = useCallback(
+		( id ) => {
+			removeNotice( id );
+		},
+		[ removeNotice ]
+	);
 
 	if ( ! notices.length ) {
 		return null;

From 034b54258bd7490710bd43b280a9de7272656fe9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 14 Sep 2022 10:00:41 -0400
Subject: [PATCH 2/2] Components: update CHANGELOG

---
 packages/components/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index fbeaa1bb6267b4..f5ac65cd275cd1 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `Notice`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44157](https://github.com/WordPress/gutenberg/pull/44157))
+
 ## 21.0.0 (2022-09-13)
 
 ### Breaking Changes