Avoid strict mode to prevent event duplication

src/hooks.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import type { RootState, AppDispatch } from "./store";
 import { clamp } from "lodash";
@@ -17,7 +17,7 @@ interface Timer {
 
 export const useTimer = (length: number, onTimeout?: () => unknown): Timer => {
   const [segs, setSegs] = useState(0);
-  const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>>();
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
 
   const updateTimer = (startTime: number) => {
     const endTime = startTime + length;
@@ -25,7 +25,7 @@ export const useTimer = (length: number, onTimeout?: () => unknown): Timer => {
     const segs = invLerp(startTime, endTime, currentTime) * 5;
     setSegs(segs);
     if (segs > 0) {
-      setTimeoutId(setTimeout(updateTimer, 100, startTime));
+      timeoutId.current = setTimeout(updateTimer, 100, startTime);
     } else if (onTimeout) {
       onTimeout();
     }
@@ -33,11 +33,11 @@ export const useTimer = (length: number, onTimeout?: () => unknown): Timer => {
 
   const start = () => {
     const startTime = Date.now();
-    setTimeoutId(setTimeout(updateTimer, 100, startTime));
+    timeoutId.current = setTimeout(updateTimer, 100, startTime);
   };
 
   const cancel = () => {
-    clearTimeout(timeoutId);
+    clearTimeout(timeoutId.current);
     setSegs(0);
   };
 

src/main.tsx

@@ -1,12 +1,9 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import { setup } from "./socket";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App />
 );
 
 setup();