Huge performance issue fixed, components rendering infinite even task…

… is finished

src/projects/04-progressBar/Bars.jsx

@@ -1,25 +1,12 @@
-import { useEffect, useState } from 'react';
-
 const Bars = ({ count = 0, onComplete = () => {} }) => {
-  const [percentage, setPercentage] = useState(0);
-
-  if (count >= 100) {
+  if (count === 100) {
     onComplete();
   }
 
-  useEffect(() => {
-    if (count >= 0 && count <= 100) {
-      setPercentage(count);
-    }
-    // setPercentage(Math.min(100, Math.max(count, 0)));
-  }, [count]);
-
   return (
     <div className="bars">
-      <span style={{ color: percentage > 49 ? '#fff' : '#000' }}>
-        {percentage}%
-      </span>
-      <div style={{ right: `${100 - percentage}%` }}></div>
+      <span style={{ color: count > 49 ? '#fff' : '#000' }}>{count}%</span>
+      <div style={{ right: `${100 - count}%` }}></div>
     </div>
   );
 };

src/projects/04-progressBar/ProgressBar.jsx

@@ -5,18 +5,29 @@ const ProgressBar = () => {
   const [count, setCount] = useState(0);
   const [success, setSuccess] = useState(false);
 
+  const [stopCount, setStopCount] = useState(false);
+
+  useEffect(() => {
+    if (count === 100) {
+      setStopCount(true);
+    }
+  }, [count]);
+
   useEffect(() => {
-    const id = setInterval(() => {
-      setCount((val) => {
-        return val + 1;
-      });
-    }, 100);
+    let id;
+    if (count < 100) {
+      id = setInterval(() => {
+        setCount((val) => {
+          // console.log(val, 'interval');
+          return val + 1;
+        });
+      }, 100);
+    }
     return () => {
-      if (count > 100) {
-        clearInterval(id);
-      }
+      // console.log('cleanup, interval cleared');
+      clearInterval(id);
     };
-  }, []);
+  }, [stopCount]);
 
   return (
     <section className="section">