diff --git a/webapp/channels/src/components/post_emoji/post_emoji.tsx b/webapp/channels/src/components/post_emoji/post_emoji.tsx
index 7cc74aad0a..e1c59be88d 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.tsx
+++ b/webapp/channels/src/components/post_emoji/post_emoji.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-interface PostEmojiProps {
+interface Props {
     name: string;
     imageUrl: string;
 }
@@ -13,23 +13,24 @@ declare module 'react' {
     }
 }
 
-export default class PostEmoji extends React.PureComponent<PostEmojiProps> {
-    public render() {
-        const emojiText = ':' + this.props.name + ':';
+const PostEmoji = ({name, imageUrl}: Props) => {
+    const emojiText = `:${name}:`;
+    const backgroundImageUrl = `url(${imageUrl})`;
 
-        if (!this.props.imageUrl) {
-            return emojiText;
-        }
-
-        return (
-            <span
-                alt={emojiText}
-                className='emoticon'
-                title={emojiText}
-                style={{backgroundImage: 'url(' + this.props.imageUrl + ')'}}
-            >
-                {emojiText}
-            </span>
-        );
+    if (!imageUrl) {
+        return <>{emojiText}</>;
     }
-}
+
+    return (
+        <span
+            alt={emojiText}
+            className='emoticon'
+            title={emojiText}
+            style={{backgroundImage: backgroundImageUrl}}
+        >
+            {emojiText}
+        </span>
+    );
+};
+
+export default React.memo(PostEmoji);