diff --git a/web/src/components/camera/AutoUpdatingCameraImage.tsx b/web/src/components/camera/AutoUpdatingCameraImage.tsx index 2bfe4ca1b..810ed82d1 100644 --- a/web/src/components/camera/AutoUpdatingCameraImage.tsx +++ b/web/src/components/camera/AutoUpdatingCameraImage.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import CameraImage from "./CameraImage"; type AutoUpdatingCameraImageProps = { @@ -20,6 +20,18 @@ export default function AutoUpdatingCameraImage({ }: AutoUpdatingCameraImageProps) { const [key, setKey] = useState(Date.now()); const [fps, setFps] = useState("0"); + const [timeoutId, setTimeoutId] = useState(); + + useEffect(() => { + setKey(Date.now()); + + return () => { + if (timeoutId) { + clearTimeout(timeoutId); + setTimeoutId(undefined); + } + }; + }, [reloadInterval]); const handleLoad = useCallback(() => { const loadTime = Date.now() - key; @@ -28,11 +40,13 @@ export default function AutoUpdatingCameraImage({ setFps((1000 / Math.max(loadTime, reloadInterval)).toFixed(1)); } - setTimeout( - () => { - setKey(Date.now()); - }, - loadTime > reloadInterval ? 1 : reloadInterval + setTimeoutId( + setTimeout( + () => { + setKey(Date.now()); + }, + loadTime > reloadInterval ? 1 : reloadInterval + ) ); }, [key, setFps]);