import { useState, useEffect, useEffectEvent } from 'react';

const App: React.FC = () => {
  const [count, setCount] = useState(0);
  const [running, setRunning] = useState(true);

  const handleTick = useEffectEvent(() => {
    if (!running) {
      return;
    }
    setCount((c) => c + 1);
  });

  useEffect(() => {
    const id = setInterval(() => {
      handleTick();
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setRunning((r) => !r)}>
        {running ? 'Stop' : 'Start'}
      </button>
    </div>
  );
};

export default App;

