blob: 53c266dde05fc5953460ac06d5dfc6c34e246fe8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { useState, useEffect, useRef } from 'react';
/**
* Custom hook to manage a timer that increments every second.
* @param isActive Whether the timer should be running.
* @param resetKey A key that, when changed, will reset the timer to 0 and restart the interval.
* @returns The elapsed time in seconds.
*/
export const useTimer = (isActive: boolean, resetKey: unknown) => {
const [elapsedTime, setElapsedTime] = useState(0);
const timerRef = useRef<NodeJS.Timeout | null>(null);
const prevResetKeyRef = useRef(resetKey);
const prevIsActiveRef = useRef(isActive);
useEffect(() => {
let shouldResetTime = false;
if (prevResetKeyRef.current !== resetKey) {
shouldResetTime = true;
prevResetKeyRef.current = resetKey;
}
if (prevIsActiveRef.current === false && isActive) {
// Transitioned from inactive to active
shouldResetTime = true;
}
if (shouldResetTime) {
setElapsedTime(0);
}
prevIsActiveRef.current = isActive;
// Manage interval
if (isActive) {
// Clear previous interval unconditionally before starting a new one
// This handles resetKey changes while active, ensuring a fresh interval start.
if (timerRef.current) {
clearInterval(timerRef.current);
}
timerRef.current = setInterval(() => {
setElapsedTime((prev) => prev + 1);
}, 1000);
} else {
if (timerRef.current) {
clearInterval(timerRef.current);
timerRef.current = null;
}
}
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
timerRef.current = null;
}
};
}, [isActive, resetKey]);
return elapsedTime;
};
|
