useAsyncEffect

useAsyncEffect.ts

import React, { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(1);
  const [autoCount, setAutoCount] = useState(1);

  useAsyncEffect(
    function* () {
      while (true) {
        yield new Promise((resolve) => setTimeout(resolve, 1000));
        setAutoCount((n) => n + count);
      }
    },
    [count]
  );

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <span>
        Count: {count}, Autocount: {autoCount}
      </span>

      <div>
        <button
          type="button"
          onClick={() => {
            setCount((n) => n + 1);
            setAutoCount(1);
          }}
        >
          Increment
        </button>
      </div>
    </div>
  );
}

const useAsyncEffect = (callback, deps) => {
  useEffect(() => {
    let canceled = false;
    const gen = callback();

    const loop = async () => {
      const { value, done } = gen.next();

      await value;

      if (!done && !canceled) {
        loop();
      }
    };

    loop();

    return () => void (canceled = true);
  }, deps);
};