Bug: reset throws TypeError: e2.getTime is not a function when used as an event handler
react-timer-hook: 4.0.6
React: 19.2.3
Browser: Microsoft Edge
OS: Windows
Description
The README demonstrates that reset can be passed directly as a React event handler:
<button onClick={reset}>Reset</button>
However, clicking the button throws:
Uncaught TypeError: e2.getTime is not a function
at getMillisecondsFromExpiry
Steps to Reproduce
Use the exact example from the README:
import React from "react";
import { useStopwatch } from "react-timer-hook";
export default function App() {
const {
milliseconds,
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
reset,
} = useStopwatch({ autoStart: true, interval: 20 });
return (
<>
<div>
{days}:{hours}:{minutes}:{seconds}:{milliseconds}
</div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={reset}>Reset</button>
</>
);
}
Expected Behavior
The stopwatch should reset to 0:0:0:0 without throwing any errors, as shown in the README.
Actual Behavior
Clicking Reset throws:
Uncaught TypeError: e2.getTime is not a function
at getMillisecondsFromExpiry
Analysis
Looking at the bundled implementation, reset is defined as:
const reset = (offsetTimestamp, autoStart = true) => {
const offset = offsetTimestamp
? getMillisecondsFromExpiry(offsetTimestamp)
: 0;
...
};
and getMillisecondsFromExpiry calls:
offsetTimestamp.getTime()
When reset is passed directly as a React event handler:
<button onClick={reset} />
React invokes it as:
Since mouseEvent is truthy, it is treated as an offsetTimestamp, and getMillisecondsFromExpiry(mouseEvent) eventually calls:
which results in the runtime error because MouseEvent does not implement getTime().
Workaround
Wrapping the call prevents React from passing the event object:
<button onClick={() => reset()}>
Reset
</button>
This works correctly.
Suggestion
There seems to be a mismatch between the documentation and the implementation. Either:
- Update the README examples to use:
<button onClick={() => reset()}>
Reset
</button>
or
- Update the implementation to ignore React's event object when
reset is used directly as an event handler.
I'd appreciate it if someone could confirm whether this is an implementation bug or if the documentation needs to be updated.
Bug:
resetthrowsTypeError: e2.getTime is not a functionwhen used as an event handlerreact-timer-hook: 4.0.6
React: 19.2.3
Browser: Microsoft Edge
OS: Windows
Description
The README demonstrates that
resetcan be passed directly as a React event handler:However, clicking the button throws:
Steps to Reproduce
Use the exact example from the README:
Expected Behavior
The stopwatch should reset to
0:0:0:0without throwing any errors, as shown in the README.Actual Behavior
Clicking Reset throws:
Analysis
Looking at the bundled implementation,
resetis defined as:and
getMillisecondsFromExpirycalls:When
resetis passed directly as a React event handler:React invokes it as:
Since
mouseEventis truthy, it is treated as anoffsetTimestamp, andgetMillisecondsFromExpiry(mouseEvent)eventually calls:which results in the runtime error because
MouseEventdoes not implementgetTime().Workaround
Wrapping the call prevents React from passing the event object:
This works correctly.
Suggestion
There seems to be a mismatch between the documentation and the implementation. Either:
or
resetis used directly as an event handler.I'd appreciate it if someone could confirm whether this is an implementation bug or if the documentation needs to be updated.