javascript - Recoil.js 使用recoilState 控制animationFrame 时的奇怪行为

Question

import React, { useState, useLayoutEffect } from "react";
import { useRecoilState, atom } from "recoil";

function Counter() {
  const [counter, setCounter] = useState(0);
  //const [isPaused, setIsPaused] = useState(true);
  const [running, setRunning] = useRecoilState(isRunning);

  useLayoutEffect(() => {
    if (running) {
      let timerId;

      const f = () => {
        setCounter((x) => x + 1);
        timerId = requestAnimationFrame(f);
      };

      timerId = requestAnimationFrame(f);

      return () => cancelAnimationFrame(timerId);
    }
  }, [running]);

  return (
    <p>
      Counter: {counter} ...{" "}
      <button onClick={() => setRunning(!running)}>
        {!running ? "Resume" : "Pause"}
      </button>
    </p>
  );
}

export default Counter;

const isRunning = atom({
  key: "isRunning",
  default: false
});

https://codesandbox.io/s/heuristic-moon-8l3g6?file=/src/App.js

上面演示中的切换按钮将暂停/恢复计数器几次，然后它会突然停止运行并且animationFrame永远不会停止。如果我要注释掉useRecoilState并取消注释useState，它会再次按预期工作。这是否与获取值时引入延迟的后坐力有关？