React useEffect: how to clearInterval? - reactjs

Question

I made a count down button.
How could I clearInterval when the button will be unmounted? (like componentWillUnmount)
const CooldownButton = ({
cooldown,
...props
}) => {
const defaultClasses = useStyles();
const [count, setCount] = useState(cooldown);
const [timer, setTimer] = useState(null);
useEffect(() => {
if (count > 0 && !timer) {
setTimer(
setInterval(() => {
if (count > 0) {
setCount((prevState) => prevState - 1);
}
if (count === 0) {
clearInterval(timer);
setTimer(null);
}
}, 1000)
);
}
}, [count, timer]);
useUpdateEffect(() => {
setCount(cooldown);
}, [cooldown]);
return (
// ...
<Typography
size={24}
className={clsx(defaultClasses.counter, classes?.counter)}
{...counterProps}
>
{`${new Date(count * 1000)
.toISOString()
.substr(...(count >= 3600 ? [11, 8] : [14, 5]))}`}
</Typography>
// ...
);
};
This will cause an infinite render:
useEffect(() => {
if (count > 0 && !timer) {
// ...
}
return () => {
clearInterval(timer);
setTimer(null);
}
}, [count, timer]);

Answer 1

if just wanner auto countdown, do not need setInterval,
when count changed, useEffect will run
const [count, setCount] = useState(cooldown);
useEffect(() => {
if (count > 0) {
const timer = setTimeout(()=> {
setCount(count - 1);
}, 1000);
return ()=> clearTimeout(timer);
}
}, [count, timer]);

Answer 2

You are adding setTimer in return and at the same time you are adding timer variable in dependency array which will cause infinite rendering. Because this useEffect will trigger whenever there is change in either count or timer.
In your case you are changing timer in useEffect itself which is causing infinite rendering. So, remove timer from dependency array (or remove setTimer function in case you don't need it) and try!
useEffect(() => {
if (count > 0 && !timer) {
// ...
}
return () => {
clearInterval(timer);
setTimer(null);
}
}, [count]);