Creating a counter in React using setInterval

omkargarde — Mon, 15 Apr 2024 09:39:18 +0000

This is example of how a regular react counter is made, here value of the counter is increased based on button clicks

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button 
         onClick={() => setCount((count) => (count + 1))}>
           count is {count}
      </button>
    </>
  );
}

To increase the value of count based every second we need use setInterval() hook and not setTimeout() because of the way React rerender

This is the code for counter based on interval

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((prevCount) => Math.min(prevCount + 1, 30));
    }, 1000); // Update every second

    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

so what does the code do exactly?

useEffect is used to setup the interval and perform clean up of interval when component unmount during rerender

setInterval takes two arguments a callback and interval for when to call the callback and return a id

clearInterval takes a single argument which is id returned by setInterval and clear the callback during unmount so that it does not interfere during the next render cycle

DEV Community: omkargarde

Creating a counter in React using setInterval