From aa5c2fea6b74e04ed9f2f30f93fc2af3043bcaaa Mon Sep 17 00:00:00 2001
From: Andrew Morris <voltrevo@gmail.com>
Date: Tue, 12 Jul 2022 12:55:33 +1000
Subject: [PATCH] Specify deps for carousel correctly

---
 .../source/Popup/components/Carousel.tsx      | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/extension/source/Popup/components/Carousel.tsx b/extension/source/Popup/components/Carousel.tsx
index 1a045531..9f60d29e 100644
--- a/extension/source/Popup/components/Carousel.tsx
+++ b/extension/source/Popup/components/Carousel.tsx
@@ -1,4 +1,11 @@
-import { FunctionComponent, useState, useEffect } from 'react';
+import {
+  FunctionComponent,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
 import { Mutex } from 'async-mutex';
 
 import delay from '../../helpers/delay';
@@ -41,45 +48,43 @@ const Carousel: FunctionComponent<{
   const [imageBPosition, setImageBPosition] = useState<Position>('right');
 
   const [resetting, setResetting] = useState(false);
-  const [transitionMutex] = useState(new Mutex());
-  const [intervalId, setIntervalId] = useState(-1);
+  const transitionMutex = useMemo(() => new Mutex(), []);
+  const intervalId = useRef<number>();
 
-  const transitionImage = async (index: number) => {
-    const releaseMutex = await transitionMutex.acquire();
+  const transitionImage = useCallback(
+    async (index: number) => {
+      const releaseMutex = await transitionMutex.acquire();
 
-    setImageAPosition('left');
-    setImageBIndex(index);
-    setImageBPosition('middle');
+      setImageAPosition('left');
+      setImageBIndex(index);
+      setImageBPosition('middle');
 
-    await delay(550);
+      await delay(550);
 
-    setResetting(true);
+      setResetting(true);
 
-    setImageAIndex(index);
-    setImageAPosition('middle');
-    setImageBPosition('right');
+      setImageAIndex(index);
+      setImageAPosition('middle');
+      setImageBPosition('right');
 
-    await delay(50);
+      await delay(50);
 
-    setResetting(false);
+      setResetting(false);
 
-    releaseMutex();
-  };
+      releaseMutex();
+    },
+    [transitionMutex],
+  );
 
   useEffect(() => {
-    console.log('Running useEffect');
     let index = 0;
-    setIntervalId(
-      setInterval(() => {
-        index = (index + 1) % images.length;
-        transitionImage(index);
-      }, 5000) as unknown as number,
-    );
-
-    return () => clearInterval(intervalId);
+    intervalId.current = setInterval(() => {
+      index = (index + 1) % images.length;
+      transitionImage(index);
+    }, 5000) as unknown as number;
 
-    /* eslint react-hooks/exhaustive-deps: "warn" -- TODO (merge-ok) Add hook deps */
-  }, []);
+    return () => clearInterval(intervalId.current);
+  }, [images.length, intervalId, transitionImage]);
 
   return (
     <div className="carousel">
@@ -112,7 +117,7 @@ const Carousel: FunctionComponent<{
                 className="radio"
                 key={imgSrc}
                 {...onAction(() => {
-                  clearInterval(intervalId);
+                  clearInterval(intervalId.current);
                   transitionImage(Number(i));
                 })}
               >