3

I'm getting [Violation] 'setInterval' handler took <N>ms message in browser console. What does this indicate ?

How can I make below code better to avoid this warning message.

React code is -

function PopularBrands() {
  const [slideIndex, setSlideIndex] = useState(1);

  useEffect(() => {
    console.log("useEffect");

    const paginate = () => {
      setSlideIndex((index) => {
        console.log(index);
        if (index === 4) {
          return 1;
        } else {
          return index + 1;
        }
      });
    };
    const interval = setInterval(paginate, 3000);
    return () => clearInterval(interval);
  }, []);

  return ...

 }
Aman Ghanghoriya
  • 169
  • 3
  • 10
  • Related: https://stackoverflow.com/questions/42218699/chrome-violation-violation-handler-took-83ms-of-runtime - i.e. it's not fatal in any way. – AKX Apr 11 '22 at 16:47
  • As an aside, you can simplify your code with `setSlideIndex((index) => (index - 1) % 4 + 1)`. – AKX Apr 11 '22 at 16:48

1 Answers1

-1

Avoid calling setInterval with code that requires processing within the statement itself, always pass in completed values.

Steve Griffith
  • 1
  • 1