diff --git a/client/components/Main/CreateNewSubnavDropdown.tsx b/client/components/Main/CreateNewSubnavDropdown.tsx
index 68bb3e7bc..81563f28a 100644
--- a/client/components/Main/CreateNewSubnavDropdown.tsx
+++ b/client/components/Main/CreateNewSubnavDropdown.tsx
@@ -6,7 +6,7 @@ import {IEventTemplate} from '../../interfaces';
 
 import {PRIVILEGES} from '../../constants';
 import * as actions from '../../actions';
-import {eventTemplates, recentTemplates} from '../../selectors/events';
+import {eventTemplates, getRecentTemplatesSelector} from '../../selectors/events';
 import {Dropdown, IDropdownItem} from '../UI/SubNav';
 
 interface IProps {
@@ -16,25 +16,10 @@ interface IProps {
     privileges: {[key: string]: number};
     createEventFromTemplate(template: IEventTemplate): void;
     eventTemplates: Array<IEventTemplate>;
-    recentTemplatesId: Array<string>;
+    recentTemplates?: Array<IEventTemplate>;
 }
 
 class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
-    constructor(props: IProps) {
-        super(props);
-        this.getRecentTemplates = this.getRecentTemplates.bind(this);
-    }
-
-    getRecentTemplates() {
-        const {recentTemplatesId, eventTemplates} = this.props;
-
-        if (recentTemplatesId.length !== 0) {
-            return eventTemplates.filter((template) =>
-                recentTemplatesId.includes(template._id)
-            );
-        }
-        return [];
-    }
     render() {
         const {gettext} = superdeskApi.localization;
         const {
@@ -43,15 +28,11 @@ class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
             createPlanningOnly,
             privileges,
             createEventFromTemplate,
-            recentTemplatesId,
+            recentTemplates,
             eventTemplates
         } = this.props;
         const items: Array<IDropdownItem> = [];
 
-        const recentTemplates = this.getRecentTemplates().sort(
-            (a, b) => recentTemplatesId.indexOf(a._id) - recentTemplatesId.indexOf(b._id)
-        );
-
         if (privileges[PRIVILEGES.PLANNING_MANAGEMENT]) {
             items.push({
                 label: gettext('Planning Item'),
@@ -119,7 +100,7 @@ class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
 function mapStateToProps(state) {
     return {
         eventTemplates: eventTemplates(state),
-        recentTemplatesId: recentTemplates(state),
+        recentTemplates: getRecentTemplatesSelector(state)
     };
 }
 
diff --git a/client/interfaces.ts b/client/interfaces.ts
index 1a3dd3918..027ec59e1 100644
--- a/client/interfaces.ts
+++ b/client/interfaces.ts
@@ -1654,7 +1654,7 @@ export interface IEventState {
     currentCalendarId?: ICalendar['qcode'];
     currentFilterId?: ISearchFilter['_id'];
     eventTemplates: Array<IEventItem>;
-    recentEventTemplates: Array<string>;
+    recentEventTemplates?: Array<IEventTemplate['_id']>;
 }
 
 export interface IEditorFormState {
diff --git a/client/reducers/events.ts b/client/reducers/events.ts
index 8f9059ebf..055aa81b8 100644
--- a/client/reducers/events.ts
+++ b/client/reducers/events.ts
@@ -15,7 +15,6 @@ const initialState: IEventState = {
     currentCalendarId: undefined,
     currentFilterId: undefined,
     eventTemplates: [],
-    recentEventTemplates: [],
 };
 
 const modifyEventsBeingAdded = (state, payload) => {
diff --git a/client/selectors/events.ts b/client/selectors/events.ts
index 5059cc8f6..0b848a8d5 100644
--- a/client/selectors/events.ts
+++ b/client/selectors/events.ts
@@ -2,7 +2,7 @@ import {createSelector} from 'reselect';
 import {get, sortBy} from 'lodash';
 
 import {appConfig} from 'appConfig';
-import {IEventItem, IPlanningAppState, LIST_VIEW_TYPE} from '../interfaces';
+import {IEventItem, IEventState, IEventTemplate, IPlanningAppState, LIST_VIEW_TYPE} from '../interfaces';
 
 import {currentPlanning, storedPlannings} from './planning';
 import {agendas, userPreferences} from './general';
@@ -18,8 +18,8 @@ export const eventIdsInList = (state) => get(state, 'events.eventsInList', []);
 export const eventHistory = (state) => get(state, 'events.eventHistoryItems');
 export const currentSearch = (state) => get(state, 'main.search.EVENTS.currentSearch');
 export const fullText = (state) => get(state, 'main.search.EVENTS.fulltext', '');
-export const eventTemplates = (state) => state.events.eventTemplates;
-export const recentTemplates = (state) => state.events.recentEventTemplates;
+export const eventTemplates = (state:IEventState) => state.events.eventTemplates;
+export const recentTemplates = (state:IEventState) => state.events.recentEventTemplates;
 export const currentEventFilterId = (state: IPlanningAppState) => state?.events?.currentFilterId;
 const isEventsView = (state) => get(state, 'main.filter', '') === MAIN.FILTERS.EVENTS;
 
@@ -223,3 +223,21 @@ export const defaultCalendarFilter = createSelector(
     [usersDefaultCalendar],
     (calendar) => calendar || {qcode: EVENTS.FILTER.DEFAULT}
 );
+
+
+export const getRecentTemplatesSelector = createSelector<
+    IEventState,
+    Array<IEventTemplate['_id']>,
+    IEventState,
+    Array<IEventTemplate>>([recentTemplates, eventTemplates],
+        (recentTemplatesId, eventTemplates) => {
+            if (recentTemplatesId && recentTemplatesId.length !== 0) {
+                return eventTemplates.filter((template) =>
+                    recentTemplatesId.includes(template._id)
+                ).sort(
+                    (a, b) => recentTemplatesId.indexOf(a._id) - recentTemplatesId.indexOf(b._id)
+                );
+            }
+            return [];
+        }
+    );