Estoy intentando hacer que se muestre una página diferente de una matriz cada 5 segundos. Actualmente lo tengo funcionando, excepto que la página no siempre cambia cada 5 segundos, sino a veces cada 10 o 15 segundos. Creo que esto se debe a que no estoy borrando el tiempo de espera correctamente, ¿alguna sugerencia?
const pages = [ 'screen1', 'screen2' ]; const [displayedPage, setDisplayedPage] = useState(pages[0]); const [count, setCount] = useState(0); useEffect(() => { const timer: ReturnType<typeof setTimeout> = setTimeout(() => { const randomNumber = pages[Math.floor(Math.random() * pages.length)]; if (randomNumber === displayedPage) { setCount(count + 1); clearTimeout(timer); return timer; } setDisplayedPage(randomNumber); }, 5000); return () => clearTimeout(timer); });Para hacer ciclos eternos, debe usar setInterval, para evitar problemas con los renderizados, puede usar Ref
const pages = [ 'screen1', 'screen2' ]; const [displayedPage, setDisplayedPage] = useState(0); const [count, setCount] = useState(0); const timer = useRef() useEffect(() => { const timer.current = setInterval(() => { const randomNumber = Math.floor(Math.random() * pages.length); setCount(count + 1); setDisplayedPage(current => randomNumber == current ? pages[(current+1)%pages.length] : pages[randomNumber] ); }, 5000); return () => clearInterval(timer.current); });