StoppableClock.hooks.jsx

function StoppableClock({ className, style }) {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  const [isRunning, setIsRunning] = useState(true);
  const toggle = useCallback(() => {
    setIsRunning(isRunning => !isRunning);
  }, []);
  useEffect(() => {
    if (isRunning) {
      const intervalId = setInterval(() => {
        setTime(new Date().toLocaleTimeString());
      }, 1000);
      return () => {
        clearInterval(intervalId);
      };
    }
  }, [isRunning]);
  return (
    <div className={clsx('StoppableClock', className)} style={style}>
      <span className="StoppableClock-time">{time}</span>
      <button className="StoppableClock-button" onClick={toggle}>Toggle</button>
    </div>
  );
}