title: Time ticker with React
body: <p>I'm building a component that renders the elapsed time from a given date. The date is a timestamp, for example, <code>1600836722</code>.</p>
  <p>Here is what I have so far:</p>
  <pre class="lang-js prettyprint-override"><code>const FORMAT_PATTERN = &quot;DD/MM/YYYY HH:mm:ss&quot;;
  
  export default function Timer({ dateCreated }) {
    const [hours, setHours] = useState(0);
    const [minutes, setMinutes] = useState(0);
    const [seconds, setSeconds] = useState(0);
  
    const [startTime, setStartTime] = useState();
  
    useEffect(() =&gt; {
      const orderTimestamp = Moment.unix(dateCreated);
      setStartTime(Moment(orderTimestamp, FORMAT_PATTERN));
    }, [dateCreated]);
  
    useEffect(() =&gt; {
      let interval = null;
      interval = setInterval(() =&gt; {
        const now = Moment(Date.now());
  
        const difference = Moment.duration(
          Moment(now, FORMAT_PATTERN).diff(startTime)
        );
  
        setHours(Math.floor(difference.asHours())); // this is so that 1 day, 12 hours will be 34 hours
        setMinutes(Moment.utc(now.diff(startTime)).format(&quot;mm&quot;));
        setSeconds(Moment.utc(now.diff(startTime)).format(&quot;ss&quot;));
      }, 1000);
  
      return () =&gt; clearInterval(interval);
    }, [hours, minutes, seconds]);
  
    return hours &amp;&amp; seconds &amp;&amp; minutes ? (
      &lt;Typography&gt;{[hours, minutes, seconds].join(&quot;:&quot;)}&lt;/Typography&gt;
    ) : null;
  }
  </code></pre>
  <p>It works, displays the time just fine but there will be multiple components on the same page that track the elapsed time and my approach does not seem the most optimized. Any ideas?</p>