useRef Demo using Timer

timer_ref.js

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [date, setDate] = useState(new Date());
  let interval = useRef();

  useEffect(() => {
    setTimeout(() => {
      clearInterval(interval.current);
    }, 5000);
  }, []);

  useEffect(() => {
    console.log("component mounted");
    
    interval.current = setInterval(() => {
      console.log("displaying current time");
      setDate(new Date());
    }, 1000);
    
    return () => {
      clearInterval(interval.current);
      console.log("component unmounted");
    };
  }, []);

  const unmount = () => {
    ReactDOM.render(<p>Hello</p>, document.getElementById("root"));
  };

  return (
    <div>
      <div>Date: {date.toLocaleTimeString()}</div>
      <br />
      <button onClick={unmount}>Unmount Component</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));