fix memory leak by putting setInterval() in a useeffect

Author: rerpha

app/wall/components/ShowHideBeamInfo.tsx

@@ -1,13 +1,15 @@
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function ShowHideBeamInfo() {
-  const [date, setDate] = useState<number>(Date.now());
-
-  setInterval(() => {
-    // Update the date, used by the beam image to get a fresh image, every 5 seconds so we're not constantly reloading the image on every render.
-    setDate(Date.now());
-  }, 5000);
+  const [date, setDate] = useState<number>(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Update the date, used by the beam image to get a fresh image, every 15 seconds so we're not constantly reloading the image on every render.
+      setDate(Date.now());
+    }, 15000);
+    return () => clearInterval(interval);
+  }, [date]);
 
   return (
     <div id="beampic" className="flex flex-col items-center justify-center">
@@ -23,7 +25,6 @@ export default function ShowHideBeamInfo() {
             alt="beam info"
             height={600}
             width={600}
-            suppressHydrationWarning // needed to avoid the server-side rendering hydration warning because the "date" variable will be further ahead on the client than the server.
           />
         </span>
       </label>