From f3fa4b2a25e367341aac2342ee14cbcdf4dd069d Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 4 Sep 2024 22:47:04 +0300 Subject: [PATCH 1/4] fix highlightable loop bug --- src/hooks/useAnimatedHighlightStyle/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts index e474a9455d4d0..07cfdb0454978 100644 --- a/src/hooks/useAnimatedHighlightStyle/index.ts +++ b/src/hooks/useAnimatedHighlightStyle/index.ts @@ -66,7 +66,7 @@ export default function useAnimatedHighlightStyle({ return; } setStartHighlight(true); - }, [shouldHighlight, startHighlight]); + }, [shouldHighlight]); React.useEffect(() => { if (!startHighlight || !didScreenTransitionEnd) { From 1a8463f8d998baa7e3cfe1b1ba0450900a7aafd7 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 5 Sep 2024 15:27:38 +0300 Subject: [PATCH 2/4] fix lint --- src/hooks/useAnimatedHighlightStyle/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts index 07cfdb0454978..a102387d028d7 100644 --- a/src/hooks/useAnimatedHighlightStyle/index.ts +++ b/src/hooks/useAnimatedHighlightStyle/index.ts @@ -66,6 +66,8 @@ export default function useAnimatedHighlightStyle({ return; } setStartHighlight(true); + // We only need to add shouldHighlight as a dependency and adding startHighlight as deps will cause a loop. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [shouldHighlight]); React.useEffect(() => { From daa74d5b18042386c19527fb8f5f922bdedc7818 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 5 Sep 2024 15:42:19 +0300 Subject: [PATCH 3/4] minor fix --- src/hooks/useAnimatedHighlightStyle/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts index a102387d028d7..acaa178d6ae7d 100644 --- a/src/hooks/useAnimatedHighlightStyle/index.ts +++ b/src/hooks/useAnimatedHighlightStyle/index.ts @@ -67,7 +67,7 @@ export default function useAnimatedHighlightStyle({ } setStartHighlight(true); // We only need to add shouldHighlight as a dependency and adding startHighlight as deps will cause a loop. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [shouldHighlight]); React.useEffect(() => { From d1aa1e93910a71138d9211aac1296d226a60c709 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 11 Sep 2024 18:31:56 +0300 Subject: [PATCH 4/4] clarified the comment --- src/hooks/useAnimatedHighlightStyle/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts index acaa178d6ae7d..dd2df58fb1e27 100644 --- a/src/hooks/useAnimatedHighlightStyle/index.ts +++ b/src/hooks/useAnimatedHighlightStyle/index.ts @@ -66,7 +66,9 @@ export default function useAnimatedHighlightStyle({ return; } setStartHighlight(true); - // We only need to add shouldHighlight as a dependency and adding startHighlight as deps will cause a loop. + // We only need to add shouldHighlight as a dependency and adding startHighlight as deps will cause a loop because + // if shouldHighlight stays at true the above early return will not be executed and this useEffect will be run + // as long as shouldHighlight is true as we set startHighlight to false in the below useEffect. // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [shouldHighlight]);