diff --git a/frontend/src/Activity/Blocklist/BlocklistRow.js b/frontend/src/Activity/Blocklist/BlocklistRow.js
index 279fb5fa5..ce95ecf11 100644
--- a/frontend/src/Activity/Blocklist/BlocklistRow.js
+++ b/frontend/src/Activity/Blocklist/BlocklistRow.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import IconButton from 'Components/Link/IconButton';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
@@ -136,7 +136,7 @@ class BlocklistRow extends Component {
 
             if (name === 'date') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   date={date}
                 />
diff --git a/frontend/src/Activity/History/HistoryRow.js b/frontend/src/Activity/History/HistoryRow.js
index 9bc7b3717..db87740ac 100644
--- a/frontend/src/Activity/History/HistoryRow.js
+++ b/frontend/src/Activity/History/HistoryRow.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import IconButton from 'Components/Link/IconButton';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Tooltip from 'Components/Tooltip/Tooltip';
@@ -143,7 +143,7 @@ class HistoryRow extends Component {
 
             if (name === 'date') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   date={date}
                 />
diff --git a/frontend/src/Activity/Queue/QueueRow.js b/frontend/src/Activity/Queue/QueueRow.js
index a1956727b..e1b1551a4 100644
--- a/frontend/src/Activity/Queue/QueueRow.js
+++ b/frontend/src/Activity/Queue/QueueRow.js
@@ -4,7 +4,7 @@ import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
@@ -319,7 +319,7 @@ class QueueRow extends Component {
 
             if (name === 'added') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   date={added}
                 />
diff --git a/frontend/src/Components/Table/Cells/RelativeDateCell.js b/frontend/src/Components/Table/Cells/RelativeDateCell.js
deleted file mode 100644
index 37d23e8f9..000000000
--- a/frontend/src/Components/Table/Cells/RelativeDateCell.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import TableRowCell from './TableRowCell';
-import styles from './RelativeDateCell.css';
-
-class RelativeDateCell extends PureComponent {
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      date,
-      includeSeconds,
-      includeTime,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      component: Component,
-      dispatch,
-      ...otherProps
-    } = this.props;
-
-    if (!date) {
-      return (
-        <Component
-          className={className}
-          {...otherProps}
-        />
-      );
-    }
-
-    return (
-      <Component
-        className={className}
-        title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
-        {...otherProps}
-      >
-        {getRelativeDate({ date, shortDateFormat, showRelativeDates, timeFormat, includeSeconds, includeTime, timeForToday: true })}
-      </Component>
-    );
-  }
-}
-
-RelativeDateCell.propTypes = {
-  className: PropTypes.string.isRequired,
-  date: PropTypes.string,
-  includeSeconds: PropTypes.bool.isRequired,
-  includeTime: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  component: PropTypes.elementType,
-  dispatch: PropTypes.func
-};
-
-RelativeDateCell.defaultProps = {
-  className: styles.cell,
-  includeSeconds: false,
-  includeTime: false,
-  component: TableRowCell
-};
-
-export default RelativeDateCell;
diff --git a/frontend/src/Components/Table/Cells/RelativeDateCell.tsx b/frontend/src/Components/Table/Cells/RelativeDateCell.tsx
new file mode 100644
index 000000000..1c5be48be
--- /dev/null
+++ b/frontend/src/Components/Table/Cells/RelativeDateCell.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import TableRowCell from './TableRowCell';
+import styles from './RelativeDateCell.css';
+
+interface RelativeDateCellProps {
+  className?: string;
+  date?: string;
+  includeSeconds?: boolean;
+  includeTime?: boolean;
+  component?: React.ElementType;
+}
+
+function RelativeDateCell(props: RelativeDateCellProps) {
+  const {
+    className = styles.cell,
+    date,
+    includeSeconds = false,
+    includeTime = false,
+
+    component: Component = TableRowCell,
+    ...otherProps
+  } = props;
+
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
+
+  if (!date) {
+    return <Component className={className} {...otherProps} />;
+  }
+
+  return (
+    <Component
+      className={className}
+      title={formatDateTime(date, longDateFormat, timeFormat, {
+        includeSeconds,
+        includeRelativeDay: !showRelativeDates,
+      })}
+      {...otherProps}
+    >
+      {getRelativeDate({
+        date,
+        shortDateFormat,
+        showRelativeDates,
+        timeFormat,
+        includeSeconds,
+        includeTime,
+        timeForToday: true,
+      })}
+    </Component>
+  );
+}
+
+export default RelativeDateCell;
diff --git a/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js b/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js
deleted file mode 100644
index 38783e7a5..000000000
--- a/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import RelativeDateCell from './RelativeDateCell';
-
-function createMapStateToProps() {
-  return createSelector(
-    createUISettingsSelector(),
-    (uiSettings) => {
-      return {
-        showRelativeDates: uiSettings.showRelativeDates,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps, null)(RelativeDateCell);
diff --git a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js
index 9db54e7a6..805b737b8 100644
--- a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js
+++ b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js
@@ -6,7 +6,7 @@ import ImportListListConnector from 'Components/ImportListListConnector';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import TmdbRating from 'Components/TmdbRating';
@@ -198,7 +198,7 @@ class DiscoverMovieRow extends Component {
 
             if (name === 'inCinemas') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   className={styles[name]}
                   date={inCinemas}
@@ -209,7 +209,7 @@ class DiscoverMovieRow extends Component {
 
             if (name === 'physicalRelease') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   className={styles[name]}
                   date={physicalRelease}
@@ -220,7 +220,7 @@ class DiscoverMovieRow extends Component {
 
             if (name === 'digitalRelease') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   className={styles[name]}
                   date={digitalRelease}
diff --git a/frontend/src/InteractiveImport/Folder/RecentFolderRow.js b/frontend/src/InteractiveImport/Folder/RecentFolderRow.js
index 3903f0d71..83c7493c4 100644
--- a/frontend/src/InteractiveImport/Folder/RecentFolderRow.js
+++ b/frontend/src/InteractiveImport/Folder/RecentFolderRow.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import IconButton from 'Components/Link/IconButton';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
 import { icons } from 'Helpers/Props';
@@ -41,7 +41,7 @@ class RecentFolderRow extends Component {
       <TableRowButton onPress={this.onPress}>
         <TableRowCell>{folder}</TableRowCell>
 
-        <RelativeDateCellConnector date={lastUsed} />
+        <RelativeDateCell date={lastUsed} />
 
         <TableRowCell className={styles.actions}>
           <IconButton
diff --git a/frontend/src/Movie/History/MovieHistoryRow.js b/frontend/src/Movie/History/MovieHistoryRow.js
index 28944d6f4..b62a8d6a6 100644
--- a/frontend/src/Movie/History/MovieHistoryRow.js
+++ b/frontend/src/Movie/History/MovieHistoryRow.js
@@ -4,7 +4,7 @@ import HistoryDetailsModal from 'Activity/History/Details/HistoryDetailsModal';
 import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
@@ -109,7 +109,7 @@ class MovieHistoryRow extends Component {
           {formatCustomFormatScore(customFormatScore, customFormats.length)}
         </TableRowCell>
 
-        <RelativeDateCellConnector
+        <RelativeDateCell
           date={date}
           includeSeconds={true}
           includeTime={true}
diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.tsx b/frontend/src/Movie/Index/Table/MovieIndexRow.tsx
index 99faf3a89..620da1290 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexRow.tsx
+++ b/frontend/src/Movie/Index/Table/MovieIndexRow.tsx
@@ -7,7 +7,7 @@ import ImdbRating from 'Components/ImdbRating';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import Column from 'Components/Table/Column';
@@ -223,7 +223,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={added}
@@ -244,7 +244,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={inCinemas}
@@ -257,7 +257,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={digitalRelease}
@@ -270,7 +270,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={physicalRelease}
@@ -283,7 +283,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ts(2739)
-            <RelativeDateCellConnector
+            <RelativeDateCell
               key={name}
               className={styles[name]}
               date={releaseDate}
diff --git a/frontend/src/MovieFile/Editor/MovieFileEditorRow.js b/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
index 41890ce1b..f93e31838 100644
--- a/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
+++ b/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
@@ -313,7 +313,7 @@ class MovieFileEditorRow extends Component {
 
             if (name === 'dateAdded') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   className={styles.dateAdded}
                   date={dateAdded}
diff --git a/frontend/src/System/Backup/BackupRow.js b/frontend/src/System/Backup/BackupRow.js
index 3e7b5aa8c..a5dbb9dea 100644
--- a/frontend/src/System/Backup/BackupRow.js
+++ b/frontend/src/System/Backup/BackupRow.js
@@ -4,7 +4,7 @@ import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
@@ -110,7 +110,7 @@ class BackupRow extends Component {
           {formatBytes(size)}
         </TableRowCell>
 
-        <RelativeDateCellConnector
+        <RelativeDateCell
           date={time}
         />
 
diff --git a/frontend/src/System/Events/LogsTableRow.js b/frontend/src/System/Events/LogsTableRow.js
index 2de54a189..2c38ea10c 100644
--- a/frontend/src/System/Events/LogsTableRow.js
+++ b/frontend/src/System/Events/LogsTableRow.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Icon from 'Components/Icon';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
 import { icons } from 'Helpers/Props';
@@ -98,7 +98,7 @@ class LogsTableRow extends Component {
 
             if (name === 'time') {
               return (
-                <RelativeDateCellConnector
+                <RelativeDateCell
                   key={name}
                   date={time}
                 />
diff --git a/frontend/src/System/Logs/Files/LogFilesTableRow.js b/frontend/src/System/Logs/Files/LogFilesTableRow.js
index ba0339b84..1e5ad552d 100644
--- a/frontend/src/System/Logs/Files/LogFilesTableRow.js
+++ b/frontend/src/System/Logs/Files/LogFilesTableRow.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Link from 'Components/Link/Link';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import translate from 'Utilities/String/translate';
@@ -23,7 +23,7 @@ class LogFilesTableRow extends Component {
       <TableRow>
         <TableRowCell>{filename}</TableRowCell>
 
-        <RelativeDateCellConnector
+        <RelativeDateCell
           date={lastWriteTime}
         />
 
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js
index e8e073a41..91de31337 100644
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
@@ -66,7 +66,7 @@ function CutoffUnmetRow(props) {
 
           if (name === 'movieMetadata.inCinemas') {
             return (
-              <RelativeDateCellConnector
+              <RelativeDateCell
                 key={name}
                 className={styles[name]}
                 date={inCinemas}
@@ -76,7 +76,7 @@ function CutoffUnmetRow(props) {
 
           if (name === 'movieMetadata.digitalRelease') {
             return (
-              <RelativeDateCellConnector
+              <RelativeDateCell
                 key={name}
                 className={styles[name]}
                 date={digitalRelease}
@@ -86,7 +86,7 @@ function CutoffUnmetRow(props) {
 
           if (name === 'movieMetadata.physicalRelease') {
             return (
-              <RelativeDateCellConnector
+              <RelativeDateCell
                 key={name}
                 className={styles[name]}
                 date={physicalRelease}
diff --git a/frontend/src/Wanted/Missing/MissingRow.js b/frontend/src/Wanted/Missing/MissingRow.js
index 52d98a16b..ac37eabf9 100644
--- a/frontend/src/Wanted/Missing/MissingRow.js
+++ b/frontend/src/Wanted/Missing/MissingRow.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
@@ -69,7 +69,7 @@ function MissingRow(props) {
 
           if (name === 'movieMetadata.inCinemas') {
             return (
-              <RelativeDateCellConnector
+              <RelativeDateCell
                 key={name}
                 className={styles[name]}
                 date={inCinemas}
@@ -79,7 +79,7 @@ function MissingRow(props) {
 
           if (name === 'movieMetadata.digitalRelease') {
             return (
-              <RelativeDateCellConnector
+              <RelativeDateCell
                 key={name}
                 className={styles[name]}
                 date={digitalRelease}
@@ -89,7 +89,7 @@ function MissingRow(props) {
 
           if (name === 'movieMetadata.physicalRelease') {
             return (
-              <RelativeDateCellConnector
+              <RelativeDateCell
                 key={name}
                 className={styles[name]}
                 date={physicalRelease}