Imagine I have an array of objects like this:
const items = [
{name: "item 0"},
{name: "item 1"},
{name: "item 2"}
]
And a component like this:
const [currentItemIndex, setCurrentItemIndex] = useState(0)
setInterval(function () {
if (currentItemIndex < 3) {
setCurrentItemIndex(currentItemIndex + 1);
} else {
clearInterval();
}
}, 5000);
return (
<div>
<p> {items[currentItemIndex].name} <p>
</div>
)
I want to update currentItemIndex every 5 seconds so the div shows next item, and if it reaches the end, it should start over: 0, 1, 2, 0, 1, 2, 0, 1, 2 ....
The problem is: it loops correctly the first time, but after reaching the end, it shows the first item for a fraction of a second and then goes to the last item: 0, 1, 2, 0 (really quick to) 2.
What I'm doing wrong?
I searched for this, but every article is talking about "how to prevent infinite loops", not "how to use them"!
You can do it with useEffect and with setTimeout like this:
const items = [{ name: "item 0" }, { name: "item 1" }, { name: "item 2" }];
const App = () => {
const [currentItemIndex, setCurrentItemIndex] = React.useState(0);
React.useEffect(() => {
const id = setTimeout(
() => setCurrentItemIndex((currentItemIndex + 1) % items.length),
1000
);
return () => {
clearInterval(id); // removes React warning when gets unmounted
};
}, [currentItemIndex]);
return (
<div>
<p> {items[currentItemIndex].name} </p>
</div>
);
};
// export default App;
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>I see a few problems with this logic that you created.
First of all, clearInterval needs to be provided a variable that you created when creating the setInterval function (as you can see here), so this clearInterval() is doing nothing.
Besides that, you do not want to clear your timer when currentItemIndex reaches its threshold, but instead you want it to go back to zero.
In React, we usually use useEffect for timing events as you need to clear them on unmount so you don't keep them running after your component is unmounted. Something like this:
useEffect(() => {
const timer = setInterval(yourFunction);
return () => clearInterval(timer);
}, [])
You can use this approach if you want to. You create a function using which will set state after 5 seconds using timeout. Once the state is set you again call the same method. For sake of react you call this method once using useEffect.
import { useEffect, useState } from "react";
const items = [{ name: "item 0" }, { name: "item 1" }, { name: "item 2" }];
export default function App() {
const [currentItemIndex, setCurrentItemIndex] = useState(0);
useEffect(() => {
incrementAfterDelay(1000, 1, 2);
}, []);
const incrementAfterDelay = (delay, step, lastStep) => {
setTimeout(
() =>
setCurrentItemIndex((value) => {
return (value < lastStep)? value + step : 0
}, incrementAfterDelay(delay, step, lastStep)),
delay
);
};
return (
<div>
<p> {items[currentItemIndex].name} </p>
</div>
);
}