Optimize how statuses are re-rendered and relative time intervals

app/assets/javascripts/components/components/status_list.jsx

@@ -3,6 +3,7 @@ import ImmutablePropTypes  from 'react-immutable-proptypes';
 import PureRenderMixin     from 'react-addons-pure-render-mixin';
 import { ScrollContainer } from 'react-router-scroll';
 import StatusContainer     from '../containers/status_container';
+import moment              from 'moment';
 
 const StatusList = React.createClass({
 
@@ -18,8 +19,22 @@ const StatusList = React.createClass({
     };
   },
 
+  getInitialState () {
+    return {
+      now: moment()
+    };
+  },
+
   mixins: [PureRenderMixin],
 
+  componentDidMount () {
+    this._interval = setInterval(() => this.setState({ now: moment() }), 60000);
+  },
+
+  componentWillUnmount () {
+    clearInterval(this._interval);
+  },
+
   handleScroll (e) {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
 
@@ -35,7 +50,7 @@ const StatusList = React.createClass({
       <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable' onScroll={this.handleScroll}>
         <div>
           {statusIds.map((statusId) => {
-            return <StatusContainer key={statusId} id={statusId} />;
+            return <StatusContainer key={statusId} id={statusId} now={this.state.now} />;
           })}
         </div>
       </div>