import { useState, useEffect, useRef } from "react"; export default function App() { const [day, setDay] = useState("Monday"); const prevDay = usePrevious(day); const getNextDay = () => { if (day === "Monday") { setDay("Tuesday") } else if (day === "Tuesday") { setDay("Wednesday") } else if (day === "Wednesday") { setDay("Thursday") } else if (day === "Thursday") { setDay("Friday") } else if (day === "Friday") { setDay("Monday") } } return ( <div style={{padding: "40px"}}> <h1> Today is: {day}<br /> { prevDay && ( <span>Previous work day was: {prevDay}</span> ) } </h1> <button onClick={getNextDay}> Get next day </button> </div> ); } function usePrevious(val) { const ref = useRef() useEffect(() => { ref.current = val }, [val]) return ref.current }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter