title: How to show time and date in realtime in React JS?
body: <h3>Briefing:</h3>
  <p>Hi, I have created a hook <code>useDate()</code> to display current time and date as follows:</p>
  <pre><code>interface ReturnDate {
    time: string;
    date: string;
    wish: string;
  }
  
  export const useDate = (): ReturnDate =&gt; {
    const locale = 'en';
    const today = new Date();
  
    const day = today.toLocaleDateString(locale, { weekday: 'long' });
    const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;
  
    const hour = today.getHours();
    const wish = `Good ${(hour &lt; 12 &amp;&amp; 'Morning') || (hour &lt; 17 &amp;&amp; 'Afternoon') || 'Evening'}, `;
  
    const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });
  
    return {
      date,
      time,
      wish,
    };
  };
  </code></pre>
  <p>And I'm using it in my <strong>component</strong> below as follows:</p>
  <pre><code>const ProfileGreetings: FC = () =&gt; {
    const { firstName } = useUserDetails();
    const { date, time, wish } = useDate();
  
    return (
      &lt;div className=&quot;greetings-container&quot;&gt;
        &lt;h1&gt;
          {wish}
          &lt;PrimaryText text={`${firstName || ''}!`} /&gt;
        &lt;/h1&gt;
  
        &lt;div&gt;
          &lt;h3&gt;
            {date}
            &lt;br /&gt;
            {time}
          &lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <h3>Date/Time format in app:</h3>
  <p>Sunday, 2 August</p>
  <p>11:54 PM</p>
  <h3>Problem Statement:</h3>
  <p>Currently what's happening is that the date and time don't update until I <strong>refresh</strong> the page. Is there any way to have all of the following to be updated in <strong>real time</strong>?</p>
  <p>I am thinking to use an <strong>interval after every 1 minute</strong> to compute the updated time and date, but don’t really know if that's good idea. Neither do I know how to start with that and how will the interval be <strong>cleared</strong>?</p>
  <p>Thanks! :)</p>