react-timer-hook
react-timer-hook copied to clipboard
Unnecessary re-rendering
For some inexplicable reason, just using the hook to start a timer causes the component in question to re-render once per second. If you use the hook in a more complex component, it becomes a huge problem. At first I thought it might have been because of including the isRunning property from the returned object, but in fact, you don't have to use any of them, and your component will re-render regardless.
The following code snippet exhibits the behavior:
let counter = 0;
const HiddenTimer = props => {
const {
expiryTimestamp
} = props;
console.log("Will expire at " + expiryTimestamp);
useTimer({expiryTimestamp, onExpire: () => console.log("Timer has expired"), autoStart: true});
console.log("Timer is being rendered");
return (
<div>Counter at {counter++}</div>
);
};
Add it to a simple app and you can observe that it is constantly being needlessly re-rendered.