How to proper setup setTimeout with recursively using React hooks? - reactjs

Question

I'm building a component that should show elements of an array, one per time and it shows the element for a period of time determined by the data. With the data below I would like to show textA for 5 seconds and then change to textB which I would show for 20 seconds, and then show textC for 10 seconds and start over again, showing textA and so on.
Here is what I'm trying:
const slides = [
{text: 'textA, time_length: 5},
{text: 'textB', time_length: 20},
{text: 'textC', time_length: 10}
] ;
const play = () => {
if (slides && slides.length > 0) {
const playSlides = () => {
this.timer = setTimeout(() => {
// update index
if (currentIndex + 1 < splashes.length) {
setCurrentIndex(currentIndex + 1)
} else {
setCurrentIndex(0)
}
}, slides[currentIndex])
}
}
}
useEffect(() => {
if (slides.length) {
debugger
play(slides)
}
return clearTimeout(this.timer)
}, [slides])
return <p>{slides[currentIndex]}</p>
}

Answer 1

This solution will show the slide.text every slide.time_length.
Notice that the 'loop' is achieved via the dependency [currentIndex]; in other words, every time the currentIndex changes, the useEffect will run once more, and will update the currentIndex after the next time_length seconds.
The calculation (currentIndex + 1) % slides.length will reset the index back to 0 if it overflows the array length (it's just a shortened version of your conditional, nothing special).
const slides = [
{ text: 'textA', time_length: 5 },
{ text: 'textB', time_length: 20 },
{ text: 'textC', time_length: 10 }
];
const TextSlider = () => {
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
if (slides.length) {
const timeoutId = setTimeout(() => {
setCurrentIndex((currentIndex + 1) % slides.length)
}, slides[currentIndex].time_length * 1000)
return () => clearTimeout(timeoutId);
}
return () => { }
}, [currentIndex])
return <h1>{slides[currentIndex].text}</h1>
}
Sometimes being less wordy can make it easier to see what's going on. Your mileage may vary -
import { useState, useEffect } from "react"
function TextSlider ({ slides = [] }) {
const [i, nextSlide] =
useState(0)
useEffect(() => {
if (i >= slides.length) return
const t =
setTimeout
( nextSlide
, slides[i].time_length * 1000
, (i + 1) % slides.length
)
return () => clearTimeout(t)
}, [i])
return <h1>{slides[i].text}</h1>
}
ReactDom.render(document.body, <TextSlider slides={slides} />)