refactor

Author: mbrookes

docs/data/material/components/progress/LinearBuffer.js

@@ -6,16 +6,6 @@ export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
-  const bufferRef = React.useRef(() => {});
-  React.useEffect(() => {
-    bufferRef.current = () => {
-      if (buffer < 100) {
-        const newBuffer = buffer + 1 + Math.random() * 10;
-        setBuffer(newBuffer > 100 ? 100 : newBuffer);
-      }
-    };
-  });
-
   const progressRef = React.useRef(() => {});
   React.useEffect(() => {
     progressRef.current = () => {
@@ -24,20 +14,14 @@ export default function LinearBuffer() {
         setBuffer(10);
       } else {
         setProgress(progress + 1);
+        if (buffer < 100 && progress % 5 === 0) {
+          const newBuffer = buffer + 1 + Math.random() * 10;
+          setBuffer(newBuffer > 100 ? 100 : newBuffer);
+        }
       }
     };
   });
 
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      bufferRef.current();
-    }, 500);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
   React.useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();

docs/data/material/components/progress/LinearBuffer.tsx

@@ -6,16 +6,6 @@ export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
-  const bufferRef = React.useRef(() => {});
-  React.useEffect(() => {
-    bufferRef.current = () => {
-      if (buffer < 100) {
-        const newBuffer = buffer + 1 + Math.random() * 10;
-        setBuffer(newBuffer > 100 ? 100 : newBuffer);
-      }
-    };
-  });
-
   const progressRef = React.useRef(() => {});
   React.useEffect(() => {
     progressRef.current = () => {
@@ -24,20 +14,14 @@ export default function LinearBuffer() {
         setBuffer(10);
       } else {
         setProgress(progress + 1);
+        if (buffer < 100 && progress % 5 === 0) {
+          const newBuffer = buffer + 1 + Math.random() * 10;
+          setBuffer(newBuffer > 100 ? 100 : newBuffer);
+        }
       }
     };
   });
 
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      bufferRef.current();
-    }, 500);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
   React.useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();