implement shouldComponentUpdate for relative_timestamp (#3320)

1 files changed, 33 insertions, 12 deletions

diff --git a/app/javascript/mastodon/components/relative_timestamp.js b/app/javascript/mastodon/components/relative_timestamp.js
index 13c36c0e4..3eed88df8 100644
--- a/app/javascript/mastodon/components/relative_timestamp.js
+++ b/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 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' })}>
-      <FormattedRelative value={date} />
-    </time>
-  );
+const dateFormatOptions = {
+  hour12: false,
+  year: 'numeric',
+  month: 'short',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
 };
 
-RelativeTimestamp.propTypes = {
-  intl: PropTypes.object.isRequired,
-  timestamp: PropTypes.string.isRequired,
-};
+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, dateFormatOptions)}>
+        <FormattedRelative value={date} />
+      </time>
+    );
+  }
+
+}
 
 export default injectIntl(RelativeTimestamp);