diff --git a/packages/rocketchat-emoji-custom/client/lib/emojiCustom.js b/packages/rocketchat-emoji-custom/client/lib/emojiCustom.js
index 89756e7cf670..ca4f9f6bccd8 100644
--- a/packages/rocketchat-emoji-custom/client/lib/emojiCustom.js
+++ b/packages/rocketchat-emoji-custom/client/lib/emojiCustom.js
@@ -49,16 +49,6 @@ getEmojiUrlFromName = function(name, extension) {
 
 Blaze.registerHelper('emojiUrlFromName', getEmojiUrlFromName);
 
-function updateEmojiPickerList() {
-	let html = '';
-	for (const entry of RocketChat.emoji.packages.emojiCustom.emojisByCategory.rocket) {
-		const renderedEmoji = RocketChat.emoji.packages.emojiCustom.render(`:${ entry }:`);
-		html += `<li class="emoji-${ entry }" data-emoji="${ entry }">${ renderedEmoji }</li>`;
-	}
-	$('.rocket.emoji-list').empty().append(html);
-	RocketChat.EmojiPicker.updateRecent();
-}
-
 deleteEmojiCustom = function(emojiData) {
 	delete RocketChat.emoji.list[`:${ emojiData.name }:`];
 	const arrayIndex = RocketChat.emoji.packages.emojiCustom.emojisByCategory.rocket.indexOf(emojiData.name);
@@ -78,7 +68,7 @@ deleteEmojiCustom = function(emojiData) {
 			}
 		}
 	}
-	updateEmojiPickerList();
+	RocketChat.EmojiPicker.updateRecent();
 };
 
 updateEmojiCustom = function(emojiData) {
@@ -154,7 +144,7 @@ updateEmojiCustom = function(emojiData) {
 		}
 	}
 
-	updateEmojiPickerList();
+	RocketChat.EmojiPicker.updateRecent();
 };
 
 Meteor.startup(() =>
diff --git a/packages/rocketchat-emoji/emojiPicker.js b/packages/rocketchat-emoji/emojiPicker.js
index db72fca46aa8..5b618d3f52ea 100644
--- a/packages/rocketchat-emoji/emojiPicker.js
+++ b/packages/rocketchat-emoji/emojiPicker.js
@@ -39,7 +39,6 @@ function getEmojisByCategory(category) {
 					//set correctPackage here to allow for recent emojis to work properly
 					if (isSetNotNull(() => RocketChat.emoji.list[`:${ emoji }:`].emojiPackage)) {
 						const correctPackage = RocketChat.emoji.list[`:${ emoji }:`].emojiPackage;
-
 						const image = RocketChat.emoji.packages[correctPackage].render(`:${ emoji }${ tone }:`);
 
 						html += `<li class="emoji-${ emoji }" data-emoji="${ emoji }" title="${ emoji }">${ image }</li>`;
@@ -126,10 +125,13 @@ Template.emojiPicker.helpers({
 	emojiList(category) {
 		const t = Template.instance();
 		const searchTerm = t.currentSearchTerm.get();
+		const activeCategory = t.currentCategory.get();
+		//this will cause the reflow when recent list gets updated
+		t.recentNeedsUpdate.get();
 
-		//clear dynamic categories to prevent duplication issues
-		if (category === 'recent' || category === 'rocket') {
-			$(`.${ category }.emoji-list`).empty();
+		//we only need to replace the active category, since switching tabs resets the filter
+		if (activeCategory !== category) {
+			return;
 		}
 
 		if (searchTerm.length > 0) {
@@ -263,7 +265,7 @@ Template.emojiPicker.events({
 Template.emojiPicker.onCreated(function() {
 	this.tone = RocketChat.EmojiPicker.getTone();
 	const recent = RocketChat.EmojiPicker.getRecent();
-
+	this.recentNeedsUpdate = new ReactiveVar(false);
 	this.currentCategory = new ReactiveVar(recent.length > 0 ? 'recent' : 'people');
 	this.currentSearchTerm = new ReactiveVar('');
 
@@ -276,4 +278,10 @@ Template.emojiPicker.onCreated(function() {
 		$('.current-tone').addClass(`tone-${ newTone }`);
 		this.tone = newTone;
 	};
+
+	this.autorun(() => {
+		if (this.recentNeedsUpdate.get()) {
+			this.recentNeedsUpdate.set(false);
+		}
+	});
 });
diff --git a/packages/rocketchat-emoji/lib/EmojiPicker.js b/packages/rocketchat-emoji/lib/EmojiPicker.js
index 42a4c56634cb..335cd28bb536 100644
--- a/packages/rocketchat-emoji/lib/EmojiPicker.js
+++ b/packages/rocketchat-emoji/lib/EmojiPicker.js
@@ -1,4 +1,4 @@
-/* globals Blaze, isSetNotNull, Template */
+/* globals Blaze, Template */
 RocketChat.EmojiPicker = {
 	width: 390,
 	height: 238,
@@ -115,23 +115,31 @@ RocketChat.EmojiPicker = {
 
 		window.localStorage.setItem('emoji.recent', this.recent);
 		RocketChat.emoji.packages.base.emojisByCategory.recent = this.recent;
-
 		this.updateRecent();
 	},
 	updateRecent() {
-		const total = RocketChat.emoji.packages.base.emojisByCategory.recent.length;
-		let html = '';
-		for (let i = 0; i < total; i++) {
-			const emoji = RocketChat.emoji.packages.base.emojisByCategory.recent[i];
-
-			if (isSetNotNull(() => RocketChat.emoji.list[`:${ emoji }:`])) {
-				const emojiPackage = RocketChat.emoji.list[`:${ emoji }:`].emojiPackage;
-				const renderedEmoji = RocketChat.emoji.packages[emojiPackage].render(`:${ emoji }:`);
-				html += `<li class="emoji-${ emoji }" data-emoji="${ emoji }">${ renderedEmoji }</li>`;
-			} else {
-				this.recent = _.without(this.recent, emoji);
-			}
+		const instance = Template.instance();
+		if (instance) {
+			instance.recentNeedsUpdate.set(true);
+		} else {
+			this.refreshDynamicEmojiLists();
 		}
-		$('.recent.emoji-list').empty().append(html);
+	},
+	refreshDynamicEmojiLists() {
+		const dynamicEmojiLists = [
+			RocketChat.emoji.packages.base.emojisByCategory.recent,
+			RocketChat.emoji.packages.emojiCustom.emojisByCategory.rocket
+		];
+
+		dynamicEmojiLists.forEach((category) => {
+			if (category) {
+				for (let i = 0; i < category.length; i++) {
+					const emoji = category[i];
+					if (!RocketChat.emoji.list[`:${ emoji }:`]) {
+						category = _.without(category, emoji);
+					}
+				}
+			}
+		});
 	}
 };