import React, { useState, useEffect, useRef } from "react"; import "./styles.css"; export default function Timer() { // useState for input, counter, start const [input, setInput] = useState(0) const [counter, setCounter] = useState(null) const [start, setStart] = useState(false) // useRef hook to make counter our point of reference to be called and set later const pauseTimer = useRef(null) // useEffect to evaluate state of counter, run a setTimeout when it updates useEffect(() => { // Only run when the user hits the "start" button and start is set to true if (start === true) { // The current reference of pauseTimer everytime setTimeout updates pauseTimer.current = counter > 0 && setTimeout(() => setCounter(counter - 1), 1000) } // The final return runs whenever the state updates or component unmounts // and should almost ALWAYS include in useEffect return () => { // stop the setTimeout with a reference pauseTimer.current clearTimeout(pauseTimer.current) } }, [start, counter, setCounter]) // Seperate useEffect when counter equals 0 to setStart to false useEffect(() => { if (counter === 0) { setStart(false) } }, [counter, setStart]) const handleChange = (e) => { setInput(e.target.value) } const handleSubmit = (e) => { e.preventDefault() // stops the submit from performing a re-render setCounter(input) e.target.reset() // removes the input from the "seconds" form input } // Start the timer const handleStart = () => { setStart(true) } // Pause the timer const handlePause = () => { setStart(false) } // Reset to initial state const handleClear = () => { setInput(0) setCounter(null) setStart(false) } // Several uses of ternary operator to display certain elements conditionally return (

Countdown:

{ counter === 0 && input > 0 ?

Time is up!

: counter !== null ?

{counter}

{input}

} { start === false && counter !== null && counter !== 0 ? : null } { start === true && counter !== 0 ? : null }

{''}

{ start === false && counter !== null ? : null }

) }

A Timer App

Countdown:

Time is up!

{counter}

{input}

{''}

Timer Clone