Rudimentary Timer

gistfile1.txt

import "./styles.css";
import { useState, useEffect } from "react";


function useTimer(timeInSeconds) {
  const [timer, setTimer] = useState(0);
  const [timeLeft, setTimeLeft] = useState(timeInSeconds);

  if (typeof timer !== "number") {
    return console.log("useTimer first argument must be a number");
  }

  useEffect(() => {
    setTimer(
      setTimeout(() => {
        timeLeft >= 1 ? setTimeLeft(timeLeft - 1) : console.log("end");
      }, 1000)
    );
  }, [timeLeft]);

  return [timer, timeLeft];
}


export default function App() {
  const timer = useTimer(10);
  console.log(timer);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <p>{timer[1]}</p>
    </div>
  );
}

improved:

export function useTimer(timeInSeconds) {
  const [timer, setTimer] = useState(null);
  const [timeLeft, setTimeLeft] = useState(timeInSeconds);

  useEffect(() => {
    let timerID = setInterval(() => {
      setTimeLeft((value) => {
        if (value >= 1) {
          return value - 1;
        }
        clearInterval(timerID);
        return value;
      });
    }, 1000);

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

  return [timer, timeLeft];
}