implement shouldComponentUpdate for relative_timestamp (#3320)

app/javascript/mastodon/components/relative_timestamp.js

@@ -2,19 +2,40 @@ import React from 'react';
 import { injectIntl, FormattedRelative } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const RelativeTimestamp = ({ intl, timestamp }) => {
+const dateFormatOptions = {
+  hour12: false,
+  year: 'numeric',
+  month: 'short',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+};
+
+class RelativeTimestamp extends React.Component {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    timestamp: PropTypes.string.isRequired,
+  };
+
+  shouldComponentUpdate (nextProps) {
+    // As of right now the locale doesn't change without a new page load,
+    // but we might as well check in case that ever changes.
+    return this.props.timestamp !== nextProps.timestamp ||
+      this.props.intl.locale !== nextProps.intl.locale;
+  }
+
+  render () {
+    const { timestamp, intl } = this.props;
     const date = new Date(timestamp);
 
     return (
-    <time dateTime={timestamp} title={intl.formatDate(date, { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' })}>
+      <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
         <FormattedRelative value={date} />
       </time>
     );
-};
+  }
 
-RelativeTimestamp.propTypes = {
+}
-  intl: PropTypes.object.isRequired,
-  timestamp: PropTypes.string.isRequired,
-};
 
 export default injectIntl(RelativeTimestamp);