Increment Counter

 Problem Statement=>

you have to create two buttons-> Start and Stop

when click on the start a counter should start from zero and it should increment every second.

when click on stop this counter should pause and on clicking of the start button again resume the counter.

If you do like this it will not work and will get stop just after incrementing 1; It's good you are using useRef to persist the value that you are pointing it to. why the state is not updating?

SetInterval runs in a different queue and also we are not using useEffect and each and everytime it is getting it value as 0, the loop is running .

Please explain why count inside setCount( count + 1 ) is always 0.

As set interval runs in different queue, even after state update, it is not able to get the updated count value

Why did u use a ref instead of a normal let variable?

Variables will be redeclared when components re-render, that is why we either use useState or useRef to store values in React.

import "./App.css";

import { useState, useRef } from "react";

function App() {

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

  const timerId = useRef(0);

  const handleStart = () => {

    timerId.current = setInterval(() => {

      clearInterval(timerId.current);

      setCounter(counter + 1);

    }, 1000);

  };

  const handleStop = () => {

    clearInterval(timerId.current);

  };

  return (

    <>

      <h1> {counter}</h1>

      <button onClick={handleStart}>Start</button>

      <button onClick={handleStop}>Stop</button>

    </>

  );

}

export default App;

import "./App.css";

import { useState, useRef } from "react";

function App() {

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

  const timerId = useRef(0);

  const handleStart = () => {

    if (!timerId.current) {

      timerId.current = setInterval(() => {

        setCounter((counter) => counter + 1);

      }, 1000);

    }

  };

  const handleStop = () => {

    clearInterval(timerId.current);

    timerId.current = 0;

  };

  return (

    <>

      <h1> {counter}</h1>

      <button onClick={handleStart}>Start</button>

      <button onClick={handleStop}>Stop</button>

    </>

  );

}

export default App;