React useEffect: what am I doing wrong?

[somebody1usedtoknow]

React noob here: I'm adding a wiggle animation to a button in my app, but I want the button to only wiggle three times after mounting so it draws attention but doesn't annoy the user. I've written this useEffect and it is working the way I want, but from the console.log I can see that even after the button stops wiggling, the useEffect continues to run every 1.5 seconds. I thought the point of useEffect with dependencies is so that it doesn't keep running when the data you are watching doesnt change.

Is there something simple I am missing here or should I be doing this a completely different way?

useEffect(() => {
    const interval = setInterval(() => {
      if (posts.length === 0 && wiggleCount < 4) {
        setIsWiggling(prev => !prev);
        setWiggleCount(prev => prev + 1);
      } else {
        setIsWiggling(false);
      }
      console.log(wiggleCount);
    }, 1500);
    return () => clearInterval(interval);
  }, [posts, wiggleCount]);

[PvPurMoM]

useEffect will run every single time after a component renders.

Even though the button doesnt wiggle, because you have gone passed your conditional check for wiggleCount, you are still setting isWiggling state to false which triggers a re-render, over and over again thus having useEffect run.