diff --git a/packages/react-utils/src/hooks/useTimer.ts b/packages/react-utils/src/hooks/useTimer.ts index bd602204e2a..d65929fcd29 100644 --- a/packages/react-utils/src/hooks/useTimer.ts +++ b/packages/react-utils/src/hooks/useTimer.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; export interface Timer { timeSpend: { @@ -13,36 +13,37 @@ export interface Timer { } export const useTimer = (): Timer => { - const [timestamp, setTimestamp] = useState(Date.now()); const [timeSpend, setTimeSpend] = useState(0); const [isLoading, setIsLoading] = useState(false); const [isStopped, setIsStopped] = useState(false); const [resetCount, setResetCount] = useState(0); + const intervalRef = useRef(null); useEffect(() => { if (isStopped || isLoading) { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + return; } - const interval = setInterval(() => { - const dateNow = Date.now(); - - if (timestamp + 1000 <= dateNow) { - setTimestamp(timestamp + 1000); - setTimeSpend(prevTime => prevTime + 1000); - } - }, 10); + intervalRef.current = setInterval(() => { + setTimeSpend(prevTime => prevTime + 1000); + }, 1000); return () => { - clearInterval(interval); + if (intervalRef.current) { + clearInterval(intervalRef.current); + } }; - }, [isLoading, isStopped, timestamp]); + }, [isLoading, isStopped]); const reset = () => { setIsLoading(false); - setResetCount(resetCount + 1); + setResetCount(prev => prev + 1); setTimeSpend(0); - setTimestamp(Date.now()); setIsStopped(false); }; @@ -52,7 +53,6 @@ export const useTimer = (): Timer => { const loading = () => { setTimeSpend(0); - setTimestamp(Date.now()); setIsLoading(true); setIsStopped(false); };