Unexpected useInterval and useEffect behaviour

Question

counter from the code below is needed for configuring a framer-motion animation. I need counter to increase by 1 with each passing second for 10 seconds but the code does not seem to be working as expected.

The problem: counter is increasing multiple times over (at times, counterInterval is running multiple times in a second) with each passing second and the interval isn't being cleared out when the counter hits a value over 10.

const [counter, setCounter] = useState(0);

  const counterInterval = setInterval(() => {
    setCounter((prevCounter) => prevCounter + 1);
    // console.log(counter);
  }, 1000);

  useEffect(() => {
    //console.log("useEffect code")
    counter >= 10 && clearInterval(counterInterval);
    // console.log("Interval Cleared!");
  }, [counter, counterInterval]);

Answer 1

I think, I may need some clarification here. Anyway, based on what I understood, I think this code will do what you are trying to achieve here.

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    const counterTimeout= setTimeout(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);
    counter >= 10 && clearTimeout(counterTimeout);
    return () => {
      clearTimeout(counterTimeout);
    };
  }, [counter]);

  return <div className="App">{counter}</div>;
}

See the codesandbox sample for better understanding.