Stopwatch


Stopwatch in React

import {useState,useEffect} from 'react' ;

export default function App() {

const[time,setTime] = useState(0);
const[running,setRunning] = useState(false)

useEffect(()=>{
let intervalid;
if(running)
{
intervalid = setInterval(()=>{setTime(time=>time+10)},10)
}
return ()=> clearInterval(intervalid) ;

},[running])

function handleStart(){
setRunning(true)
}

function handleStop()
{
  setRunning(false)
}
function handleReset()
{
        setRunning(false)
  setTime(0);
}

const minutes = Math.floor(time / 60000);
const seconds = Math.floor((time / 1000) % 60);
const milliseconds = Math.floor(time % 1000);

return (
<>
<div>
{minutes.toString().padStart(2, "0")}:
{seconds.toString().padStart(2, "0")}.
{milliseconds.toString().padStart(2, "0").slice(0, 2)}
</div>
<button onClick={handleStart}> Start </button>
<button onClick={handleStop}> Stop </button>
<button onClick={handleReset}> Reset </button>

</>

);

}