first commit

app/useRef2.tsx

@@ -0,0 +1,35 @@
+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>
+  );
+}