Can I use an if statement within a React useEffect hook like this?

user_19506665 0
Viewed 52

I am a beginner using useEffect in React to update the index state of an array on an interval. I want the index to increase by 1 every five seconds, and when it reaches the end of the array loop back to 0.

I put an 'if' statement to check for this within my useEffect function, but it doesn't seem to be firing. When the array reaches the end, my console shows an error reading from an undefined index.

    
  const [idx, setIdx] = useState(0);

    useEffect(() => {

      const interval = setInterval(() => setIdx((previousValue) => previousValue 
         +1), 5000);
         if(idx > testimonials.length-1) { setIdx(0)};
      return () => {
        clearInterval(interval);
   };
   }, []);

Can anyone see what I'm doing wrong?

use-effect reactjs
3 Answers

Use the remainder operator (%):

const [idx, setIdx] = useState(0);

useEffect(() => {
  const interval = setInterval(
    () => setIdx(idx => (idx + 1) % testimonials.length),
    5000,
  );
  return () => clearInterval(interval);
}, []);
user_4382730

You need to pass the idx value to the useEffect dependencies array.

import React from 'react';

const testimonials = [1, 2, 3, 4, 5, 6];
export default function App() {
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(
      () => setIdx((previousValue) => previousValue + 1),
      1000
    );

    if (idx > testimonials.length - 1) {
      setIdx(0);
    }
    return () => {
      clearInterval(interval);
    };
  }, [idx]);

  return (
    <div>
      <h1>{idx}</h1>
    </div>
  );
}
user_89178980

you should use this statement

if(idx > testimonials.length-1) { setIdx(0)};

outside the useEffect and above the return which is returning the JSX.

user_196244230
Related