Funciona bien, ya que pude detenerme cuando se alcanzó el límite determinado a través de la iteración.
Pero me pregunto por qué cuando traté de retrasar el tiempo de ejecución de setInterval, el incremento de la barra de progreso se vuelve más lento.
Aumentar el tiempo de retraso de setInterval o setTimeout afectaría la velocidad a una más lenta.
Lo que quería es retrasar la ejecución en 5 segundos, y la velocidad de incremento es de 1 por segundo.
const [progressBar, setProgressBar] = React.useState(0); let timeout; let interval; React.useEffect( () => { timeout = setTimeout(() =>{ if(progressBar === 100){ return clearTimeout(timeout); } else{ interval = setInterval(() =>{ if(progressBar === 100){ clearInterval(interval); } else{ setProgressBar(prev_value => prev_value + 1); } },10); } }, 10); return () => { clearTimeout(timeout); clearInterval(interval); }; }, [progressBar]); let divStyle = { backgroundColor: "green", width: "100px", maxWidth: `${progressBar}px`, border: "1px solid red" }JSX
<div className='progress-bar' style={divStyle}>{progressBar}</div>Creo que usas el error de enlace, si usas setState dentro de reaccionar, eso será volver a ejecutar esa función en el mundo de reacción.
por lo tanto, su intervalo siempre se ejecuta 1 vez porque destruye que en destruir devuelva la llamada,
una vez que establezca el Estado que se activará en función de sus dependencias de useEffect ,
Creo que deberías escribir eso así. no necesita ningún deps y solo borra ese intervalo cuando ese valor se convierte en lo que desea.
tal vez eso sea útil. https://stackblitz.com/edit/react-ts-any9su?file=App.tsx