diff --git a/webapp/src/components/blockIconSelector.tsx b/webapp/src/components/blockIconSelector.tsx
index 798c8bb0d..3535c1dbe 100644
--- a/webapp/src/components/blockIconSelector.tsx
+++ b/webapp/src/components/blockIconSelector.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useMemo} from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
 
 import {BlockIcons} from '../blockIcons'
@@ -21,64 +21,55 @@ type Props = {
     readonly?: boolean
 }
 
-class BlockIconSelector extends React.Component<Props> {
-    static defaultProps: Partial<Props> = {
-        size: 'm',
-    }
+const BlockIconSelector = React.memo((props: Props) => {
+    const {block, intl, size} = props
 
-    shouldComponentUpdate(): boolean {
-        return true
-    }
-
-    onSelectEmoji = (emoji: string) => {
-        mutator.changeIcon(this.props.block, emoji)
-
-        // Close the menu
+    const onSelectEmoji = useMemo(() => (emoji: string) => {
+        mutator.changeIcon(props.block, emoji)
         document.body.click()
+    }, [])
+
+    if (!block.icon) {
+        return null
     }
 
-    render(): JSX.Element | null {
-        const {block, intl, size} = this.props
-        if (!block.icon) {
-            return null
-        }
-        let className = `octo-icon size-${size}`
-        if (this.props.readonly) {
-            className += ' readonly'
-        }
-        const iconElement = <div className={className}><span>{block.icon}</span></div>
-        return (
-            <div className='BlockIconSelector'>
-                {this.props.readonly && iconElement}
-                {!this.props.readonly &&
-                <MenuWrapper>
-                    {iconElement}
-                    <Menu>
-                        <Menu.Text
-                            id='random'
-                            icon={<EmojiIcon/>}
-                            name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
-                            onClick={() => mutator.changeIcon(block, BlockIcons.shared.randomIcon())}
-                        />
-                        <Menu.SubMenu
-                            id='pick'
-                            icon={<EmojiIcon/>}
-                            name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
-                        >
-                            <EmojiPicker onSelect={this.onSelectEmoji}/>
-                        </Menu.SubMenu>
-                        <Menu.Text
-                            id='remove'
-                            icon={<DeleteIcon/>}
-                            name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
-                            onClick={() => mutator.changeIcon(block, '', 'remove icon')}
-                        />
-                    </Menu>
-                </MenuWrapper>
-                }
-            </div>
-        )
+    let className = `octo-icon size-${size || 'm'}`
+    if (props.readonly) {
+        className += ' readonly'
     }
-}
+    const iconElement = <div className={className}><span>{block.icon}</span></div>
+
+    return (
+        <div className='BlockIconSelector'>
+            {props.readonly && iconElement}
+            {!props.readonly &&
+            <MenuWrapper>
+                {iconElement}
+                <Menu>
+                    <Menu.Text
+                        id='random'
+                        icon={<EmojiIcon/>}
+                        name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
+                        onClick={() => mutator.changeIcon(block, BlockIcons.shared.randomIcon())}
+                    />
+                    <Menu.SubMenu
+                        id='pick'
+                        icon={<EmojiIcon/>}
+                        name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
+                    >
+                        <EmojiPicker onSelect={onSelectEmoji}/>
+                    </Menu.SubMenu>
+                    <Menu.Text
+                        id='remove'
+                        icon={<DeleteIcon/>}
+                        name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
+                        onClick={() => mutator.changeIcon(block, '', 'remove icon')}
+                    />
+                </Menu>
+            </MenuWrapper>
+            }
+        </div>
+    )
+})
 
 export default injectIntl(BlockIconSelector)