A CallBack, Modulo, and setInterval Walk into a Bar...

I was working on a project that required me to cycle through an array of words and display them one at at time. Sounds simple.The goal was clear, show one word, wait a few seconds, show the next, and loop it FOREVER.

My instinct… A LOOP! That has always been my go-to when iterating over an array, just like a trusty 6-shooter at my side.

But this time, something wasn’t firing properly. I’ve never been super confident with JavaScript’s timing functions like setTimeout or setInterval, but I knew this is where I need to be for this timing function to work. As I dug deeper, I realized the tools I thought I needed weren’t the ones I actually needed, Enter: the callback function, the modulo operator, and the time-sensitive, often misunderstood setInterval.

Those three didn’t just wrangle my problem, they went and changed the whole corral.

My First Attempt: forEach + setTimeout

My first instinct was to use a forEach loop. I thought, 'I'll just loop through the words and use setTimeout to delay each one.' In theory, I thought this should have worked:

const words = ['Innovate', 'Elevate', 'Create'];
words.forEach((word, index) => {
setTimeout(() => console.log(word);
}, 2000);
});

WRONG:

This approach worked once and then it stopped. No loop. No reactivity. No way to update the UI properly in React.

setInterval: What I Actually Needed

After realizing that forEach and setTimeout weren’t going to cut it, I turned to setInterval. I knew it ran a block of code every X milliseconds, but I had never really used it confidently, especially inside a React component.

Here’s what a basic version looks like:

setInterval(() => { 
 console.log('This runs every 2 seconds');
}, 2000);

Simple enough. But in React, we don’t just want to log something. We want to update the UI. That means updating state. So I wrapped the setInterval inside a useEffect, and used useState to keep track of which word should be showing:

const [index, setIndex] = useState(0); 
 useEffect(() => { 
 const interval = setInterval(() => { 
 setIndex((prevIndex) => prevIndex + 1); 
  }, 2000); 
 return () => clearInterval(interval); // cleanup 
 }, [ ]);

Every 2 seconds, the state updated, React re-rendered, and I could display the new word. Sweet!
But there was still a problem... What happens when the index reaches the end of the array?
That’s when the modulo operator strolled in, tipped its hat, and said: 'I’ll take it from here, you yellow-belly...'

Modulo — My New Favorite Loop

So I had the timer updating the index every 2 seconds, awesome. But pretty quickly, I hit another issue... The index just kept going up forever and eventually crashed the app. That’s because arrays don’t like when you ask them for words[1000]. What I really needed was a way to loop back to the beginning when I reached the end of the array. That’s where the modulo operator (%) became my new Hombre.

Here’s the trick:

const nextIndex = (prevIndex + 1) % words.length;

This line does two things at once. Increments the index by 1 and Resets it to 0 if it reaches the end of the array. It’s a simple piece of math, but it keeps the app from crashing and creates a perfect loop. Once I plugged this into the setInterval callback, the cycle was complete.

The Final Working Solution

Here’s the final version of the component that cycles through words cleanly, using setInterval, a state callback, and the % operator:

 const words = ['Innovate', 'Elevate', 'Create', 'Accelerate']; 
 const [index, setIndex] = useState(0); 
 useEffect(() => { 
 const interval = setInterval(() => { 
 setIndex((prevIndex) => (prevIndex + 1) % words.length); 
 }, 2000); 
 return () => clearInterval(interval); // Cleanup on unmount 
 }, []); 
 
 {words[index]}

Final Thoughts

This was one of those moments where I felt like I had to unlearn what I thought I knew. I wanted to reach for my trusty loop, because I always think of loops when working with arrays. But in React, loops aren’t always the answer, especially when you’re dealing with time. The real solution came from combining a callback function that safely updates state, the modulo operator to create a loop, and a setInterval to drive the timing.

So what the moral of the story? If an array walks into a bar, don't automatically pull a loop on `em.