Understand useEffect second param - reactjs

Question

i doing something that is good for my case, but i dont understand how its work, i will be happy to explanation comments.
i try to do function that every 5 seconds change the background image.
1.my first try been:
(i have mainImages array with 3 images for example.)
const [index, setIndex] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setIndex(index+1)
(index > mainImages.length-1)? console.log("Bigger",index):console.log("smaller","i="i)
}, 5000);
return () => clearInterval(interval);
}, []);
in this case.
every 5 sec i get -"smaller",i=0 - for each interval even after 3 or more intervals
the weird part: the Images is changes like expected. even the index still 0.
2.my second try: i get what i Expected also in the index and the images.
the only changes between its tha i put [index] to use effect sec param.
useEffect(() => {
thesame....
}, [index]);
in this case.
every 5 sec i get the right console (
every 5 sec i get -"smaller",i=0
"smaller",i=1
"smaller",i=2
"Bigger",i=3.......
so my question: what is happend around behind the scenes ther, and how its affect like that? how its working?

Answer 1

The dependency array is used to decide when to throw out the old effect and start a new one. So with an empty array, the effect only runs once on mount, then does its teardown on unmount. That means you set up the interval once. The index const in the closure has a value of 0, and that value will never change.
When you changed it to have index in the dependency array, now every time the component renders, if the index changed it will teardown the old interval and start a new one. For each of these, the value of index in the closure is whatever the value was when the effect ran. So 0 for the first one, then 1 for the second, etc.
Note that with this second approach, the intervals will only ever go off once each. So really, they're more like timeouts instead of intervals. If you wanted, you could change it to setTimeout, and the result would be basically the same.
But for your specific case, there's an even better approach: use the callback version of setIndex. Rather than relying on the closure to know the value of index, you can let react tell you what the latest value of index is:
const [index, setIndex] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setIndex(prevIndex => {
(prevIndex > mainImages.length-1)
? console.log("Bigger", prevIndex)
: console.log("smaller","i="i);
return prevIndex + 1;
});
}, []);
return () => clearInterval(interval);
}, []);
// If you don't need the logging, then setting the state can be simply:
// setIndex(prevIndex => prevIndex + 1)