Modifying timer to use a custom hook internally, which is cleaner

client/src/components/util/Timer.jsx

@@ -1,18 +1,28 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import ms from "pretty-ms";
 
-export default ({ seconds, onTimeout }) => {
+const useCountdown = (seconds, onEnd) => {
+  const [finished, setFinished] = useState(false);
   const [remaining, setRemaining] = useState(seconds);
+  const remainingMut = useRef(seconds);
+
+  useEffect(() => {
+    const timer = setInterval(() => setRemaining(remainingMut.current -= 1), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
   useEffect(() => {
-    const countDown = () => {
-      setRemaining(remaining - 1)
-      if (remaining <= 0) {
-        onTimeout();
-      }
+    if (!finished && remaining <= 0) {
+      onEnd();
+      setFinished(true);
     }
-    const timer = setInterval(countDown, 1000);
-    return () => { clearInterval(timer) };
-  });
+  }, [finished, remaining, onEnd])
+
+  return remaining;
+}
+
+export default ({ seconds, onTimeout }) => {
+  const remaining = useCountdown(seconds, onTimeout);
 
   return remaining > 0 
     ? <span className="timer">Time: <span className="timer__time">{ms(remaining * 1000)}</span></span>