bug: react hooks setInterval and clearInterval

irohitb · Apr 7, 2021 · 109e94d · 109e94d
1 parent bb34ae8
commit 109e94d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -8,15 +8,17 @@ const SafeAreaViewDeciderDefaultProps = {
 const ProgressBar = ({ currentProgress, colorOfNonProgressBar = 'white', colorOfProgressBar = 'black', heightOfProgressBar = 5, SafeAreaViewDeciderProps = SafeAreaViewDeciderDefaultProps, totalNumberOfProgressBars, blink = true, durationForTheBlink = 500, hideProgressBar = false, }) => {
     const width = Dimensions.get('window').width;
     const [blinkVisibility, setBlinkVisiblity] = React.useState(false);
+    const blinkInterval = React.useRef(null);
     const progressBarArray = [];
-    const changeComponentBlinkVisibility = () => {
-        setBlinkVisiblity(!blinkVisibility);
-    };
     React.useEffect(() => {
         if (blink) {
-            setInterval(() => {
-                changeComponentBlinkVisibility();
+            const timer = setInterval(() => {
+                console.log('called');
+                setBlinkVisiblity((blinkVisibility) => !blinkVisibility);
             }, durationForTheBlink);
+            return () => {
+                clearInterval(timer);
+            };
         }
     }, []);
     if (hideProgressBar) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-form-progress",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "A react native component super useful in displaying progress when user is filling up forms like signup page, setting, information catering etc",
   "main": "lib/index.js",
   "types": "lib",

diff --git a/src/index.tsx b/src/index.tsx
@@ -34,17 +34,18 @@ const ProgressBar = ({
 }: ProgressBarProps) => {
   const width = Dimensions.get('window').width;
   const [blinkVisibility, setBlinkVisiblity] = React.useState(false);
+  const blinkInterval: any = React.useRef(null);
   const progressBarArray = [];
 
-  const changeComponentBlinkVisibility = () => {
-    setBlinkVisiblity(!blinkVisibility);
-  };
-
   React.useEffect(() => {
     if (blink) {
-      setInterval(() => {
-        changeComponentBlinkVisibility();
+      const timer = setInterval(() => {
+        console.log('called');
+        setBlinkVisiblity((blinkVisibility) => !blinkVisibility);
       }, durationForTheBlink);
+      return () => {
+        clearInterval(timer);
+      };
     }
   }, []);