36 lines
946 B
TypeScript
36 lines
946 B
TypeScript
import { useState, useRef, JSX } from "react";
|
|
|
|
export default function Timer(): JSX.Element {
|
|
const [seconds, setSeconds] = useState(0);
|
|
|
|
// Store the timer ID in a ref so clearing it doesn't cause a re-render
|
|
const timerIdRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const startTimer = () => {
|
|
if (timerIdRef.current !== null) return;
|
|
|
|
timerIdRef.current = setInterval(() => {
|
|
setSeconds((prev) => prev + 1);
|
|
}, 1000);
|
|
};
|
|
|
|
const stopTimer = () => {
|
|
if (timerIdRef.current !== null) {
|
|
clearInterval(timerIdRef.current);
|
|
timerIdRef.current = null; // Clear ref value without triggering a re-render
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<p className="text-2xl font-bold">Seconds: {seconds}</p>
|
|
<button onClick={startTimer} className="btn btn-success mr-2">
|
|
Start
|
|
</button>
|
|
<button onClick={stopTimer} className="btn btn-error">
|
|
Stop
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|