使用挂钩对功能组件计数器进行反应

Question

我试图理解新的React钩子及其用例。

我的目标是一个单一的组成部分，计算起来，也每x滴答计数另一个计数器。

我使用useEffect和useState实现了它，主要有两个问题：
1。组件在调用超时之前卸载时发生内存泄漏（使用react router导航时）
2。该组件在每个刻度上渲染两次，因为useEffect和useState都会触发渲染。

我认为解决方案是使用useRef或usemo，但我还没有弄明白。

我的当前组件（带有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;

正如我所说，像这样，我有提到的两个问题。我可以完全删除使用效果来修复双重渲染，但是当我点击触发按钮时，刻度会堆积起来，这比双重渲染更糟糕。

注释的useRef部分是我尝试过的，但不知何故它不起作用。

我感谢所有的帮助！

编辑：第三个小问题是，像这样，计数器只在setTimeout下运行，这将触发另一个setTimeout，因此如果该过程需要一些时间，它实际上不会是一个精确的间隔。

因此，我的目标是在一个单独的进程中运行一个时间间隔（我会说在useEffect中），它会在每个滴答声中导致重新渲染，而不会在每次调用或其他事件触发重新渲染时叠加。