How to add this setInterval function to this React code? - reactjs

Question

I have an image slider now, but the images change only at the click of a button, and I want to add this function so that it works automatically:
var timer;
timer = setInterval(function() {
plusSlides(1);
}, 5000);
This is the React image slider code (full demo at https://codepen.io/anon/pen/dBmvje):
function Slider({ items }) {
const [ active, setActive ] = React.useState(0);
const { length, [active]: slide } = items;
const next = e => setActive((active + +e.target.dataset.step + length) % length);
const goTo = e => setActive(+e.target.dataset.index);
return (
<div>
<div className="slideshow-container">
<div className="mySlides fade">
<div className="numbertext">{active + 1} / {length}</div>
<img src={slide.img} />
<div className="text">{slide.title}</div>
</div>
<a className="prev" onClick={next} data-step={-1}>❮</a>
<a className="next" onClick={next} data-step={+1}>❯</a>
</div>
<div className="dots">
{items.map((n, i) => (
<span
key={n.id}
className={`dot ${i === active ? 'active' : ''}`}
onClick={goTo}
data-index={i}
></span>
))}
</div>
</div>
);
}
And here is the whole Javascript code from where I "borrowed" this function from, so that it is clear where the "plusSlides (1);" function came from :
var timer;
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
timer = setInterval(function() {
plusSlides(1);
}, 5000);

Answer 1

In functional React components, you can set up side effects with the effect hook (React.useEffect). Add this code before the return statement:
React.useEffect(() => {
const timeout = setTimeout(() => setActive((active + 1 + length) % length), 5000);
return () => clearTimeout(timeout);
}, [active, length]);
The first argument to useEffect is the function to run, and the second is the list of dependencies (the function will re-run if a dependency changes). The return value from the function tells how to clean up the effect when the component is unmounted or one of the dependencies changes.
Due to the requirement of listing the effect's dependencies, it seemed better to use setTimeout rather than setInterval in this case. When the timeout runs, the value of active will change, causing the effect function to re-run and start another timeout. A side benefit of this approach is it works better with user interaction: if the user manually advances the slide, the timeout will be reset and the slide will wait 5s to change again (whereas with the interval, the slide might change again right away if the user happened to click right before the interval's next scheduled run).