title: How can you trigger a rerender of a React js component every minute?
body: <p><strong>The Context:</strong><br>
  A hook is defined and returns an object that contains the timestamp of the last time a file was modified. </p>
  
  <p>I calculate the difference from the timestamp until now to show the user how long it was been since they have last saved. </p>
  
  <pre><code>const StageFooter = (props) =&gt; {
    const [, , meta] = useMetadata("Tenant Setup Data", "setupData")
  
    return (
      &lt;StageControls&gt;
        &lt;div id="footer-start"&gt;&lt;/div&gt;
        &lt;SavingBlock key={meta?.modified}&gt;
          {`Last saved ${
            meta.modified !== undefined ? formatDistanceToNow(meta.modified) : " "
          } ago`}
        &lt;/SavingBlock&gt;
        &lt;div id="footer-end"&gt;&lt;/div&gt;
      &lt;/StageControls&gt;
    )
  }
  
  export default StageFooter
  </code></pre>
  
  <p><br></p>
  
  <p><strong>The Problem:</strong><br>
  The calculated difference from the timestamp until now does not update in real-time. For example, it would say "Last saved 10 minutes ago" but after a couple of minutes has passed the string still remains the same. It would only update if the user navigates away from the page then back or if the user refreshes the page. </p>
  
  <p>With all this in mind, I'm basically looking to rerender the component every time a minute has passed so that the value is updated in real-time. </p>
  
  <p>Thanks for your time!</p>