React Function Component counter with hooks - reactjs

Question

I'm trying to understand the new React hooks and their use cases.
My goal is a single component that counts up and also every x tick counts another counter.
I have achieved it using useEffect and useState, with two main problems:
1. A memory leak when the component unmounts before the timeout gets called (when navigating using react-router)
2. The component renders twice on every tick because useEffect and useState both trigger the render.
I think the solution will be something with useRef or useMemo but I haven't figured it out yet.
My current component (with typescript):
import React from "react";
const Component: React.FC = () => {
const [trigger, setTrigger] = React.useState(0);
const [timer, setTimer] = React.useState({ cycle: 0, count: 0 });
let refTimer = React.useRef({ cycle: 0, count: 0 });
// useRef
// React.useEffect(() => {
// setInterval(() => {
// console.log("tick");
// if (refTimer.current.count % 2 === 0) {
// refTimer.current.cycle++;
// setTimer(refTimer.current);
// }
// refTimer.current.count++;
// setTimer(refTimer.current);
// // console.log(timer);
// }, 1000);
// }, []);
// useState
React.useEffect(() => {
console.log("effect tick");
setTimeout(() => {
console.log("tick");
const count = timer.count + 1;
if (count % 2 === 0) {
const cycle = timer.cycle + 1;
setTimer({ ...timer, count, cycle });
return;
}
setTimer({ ...timer, count });
}, 1000);
}, [timer]);
return (
<div>
<br />
<br />
<br />
<br /> Playground:
<div>Count: {timer.count}</div>
<div>Cycle: {timer.cycle}</div>
<button type="button" onClick={(): void => setTrigger(trigger + 1)}>
Trigger Count: {trigger}
</button>
</div>
);
};
export default Component;
As I said, like this I have the mentioned two problems. I can remove the useEffect entirely that would fix the double render but when I click the Trigger Button the ticks will stack up which is worse than double renders.
The commented useRef part is what I have tried but it somehow doesn't work.
I appreciate all the help!
Edit:
A third minor problem is that like this the counter runs only with setTimeout which will trigger another setTimeout, so if that process takes some time it won't really be an exact interval.
So my goal is an interval that runs in a separate process (I'd say inside a useEffect) what will cause a rerender on every tick and won't stack up on each call or when something else triggers a rerender.

Answer 1

You can fix the memory leak mentioned in #1.
React.useEffect(() => {
console.log("effect tick", timer);
// .. 👇 get the timeout ID to clear on unmount
const id = setTimeout(() => {
console.log(`tick id=${id}`, timer);
const count = timer.count + 1;
if (count % 2 === 0) {
const cycle = timer.cycle + 1;
setTimer({ ...timer, count, cycle });
return;
}
setTimer({ ...timer, count });
}, 1000);
// ... 👇 Clean up here with the ID on unmount
return () => clearTimeout(id);
}, [timer]);
Regarding #2 double render, would you be more specific?
Before/After cleaning up in useEffect above, I am unable to figure out what you mean as the current console logs seem to work as expected.