diff --git a/webapp/src/components/sidebar/boardTemplateMenuItem.tsx b/webapp/src/components/sidebar/boardTemplateMenuItem.tsx
new file mode 100644
index 000000000..c07bf0f69
--- /dev/null
+++ b/webapp/src/components/sidebar/boardTemplateMenuItem.tsx
@@ -0,0 +1,84 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {injectIntl, IntlShape} from 'react-intl'
+
+import {Board} from '../../blocks/board'
+import mutator from '../../mutator'
+import IconButton from '../../widgets/buttons/iconButton'
+import DeleteIcon from '../../widgets/icons/delete'
+import EditIcon from '../../widgets/icons/edit'
+import OptionsIcon from '../../widgets/icons/options'
+import Menu from '../../widgets/menu'
+import MenuWrapper from '../../widgets/menuWrapper'
+
+type Props = {
+    boardTemplate: Board
+    isGlobal: boolean
+    showBoard: (id: string) => void
+    activeBoardId?: string
+    intl: IntlShape
+}
+
+const addBoardFromTemplate = async (intl: IntlShape, showBoard: (id: string) => void, boardTemplateId: string, activeBoardId?: string, global = false) => {
+    const oldBoardId = activeBoardId
+    const afterRedo = async (newBoardId) => {
+        showBoard(newBoardId)
+    }
+    const beforeUndo = async () => {
+        if (oldBoardId) {
+            showBoard(oldBoardId)
+        }
+    }
+    const asTemplate = false
+    const actionDescription = intl.formatMessage({id: 'Mutator.new-board-from-template', defaultMessage: 'new board from template'})
+
+    if (global) {
+        await mutator.duplicateFromRootBoard(boardTemplateId, actionDescription, asTemplate, afterRedo, beforeUndo)
+    } else {
+        await mutator.duplicateBoard(boardTemplateId, actionDescription, asTemplate, afterRedo, beforeUndo)
+    }
+}
+
+const BoardTemplateMenuItem = React.memo((props: Props) => {
+    const {intl, boardTemplate, isGlobal, activeBoardId} = props
+
+    const displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
+
+    return (
+        <Menu.Text
+            key={boardTemplate.id}
+            id={boardTemplate.id}
+            name={displayName}
+            icon={<div className='Icon'>{boardTemplate.icon}</div>}
+            onClick={() => {
+                addBoardFromTemplate(intl, props.showBoard, boardTemplate.id, activeBoardId, isGlobal)
+            }}
+            rightIcon={!isGlobal &&
+                <MenuWrapper stopPropagationOnToggle={true}>
+                    <IconButton icon={<OptionsIcon/>}/>
+                    <Menu position='left'>
+                        <Menu.Text
+                            icon={<EditIcon/>}
+                            id='edit'
+                            name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
+                            onClick={() => {
+                                props.showBoard(boardTemplate.id)
+                            }}
+                        />
+                        <Menu.Text
+                            icon={<DeleteIcon/>}
+                            id='delete'
+                            name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
+                            onClick={async () => {
+                                await mutator.deleteBlock(boardTemplate, 'delete board template')
+                            }}
+                        />
+                    </Menu>
+                </MenuWrapper>
+            }
+        />
+    )
+})
+
+export default injectIntl(BoardTemplateMenuItem)
diff --git a/webapp/src/components/sidebar/sidebarAddBoardMenu.tsx b/webapp/src/components/sidebar/sidebarAddBoardMenu.tsx
index c14d1edf2..8f4701ede 100644
--- a/webapp/src/components/sidebar/sidebarAddBoardMenu.tsx
+++ b/webapp/src/components/sidebar/sidebarAddBoardMenu.tsx
@@ -17,6 +17,8 @@ import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 
+import BoardTemplateMenuItem from './boardTemplateMenuItem'
+
 import './sidebarAddBoardMenu.scss'
 
 type Props = {
@@ -79,9 +81,23 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
                             <Menu.Separator/>
                         </>}
 
-                        {workspaceTree.boardTemplates.map((boardTemplate) => this.renderBoardTemplate(boardTemplate))}
+                        {workspaceTree.boardTemplates.map((boardTemplate) => (
+                            <BoardTemplateMenuItem
+                                boardTemplate={boardTemplate}
+                                isGlobal={false}
+                                showBoard={this.props.showBoard}
+                                activeBoardId={this.props.activeBoardId}
+                            />
+                        ))}
 
-                        {globalTemplateTree && globalTemplateTree.boardTemplates.map((boardTemplate) => this.renderBoardTemplate(boardTemplate, true))}
+                        {globalTemplateTree && globalTemplateTree.boardTemplates.map((boardTemplate) => (
+                            <BoardTemplateMenuItem
+                                boardTemplate={boardTemplate}
+                                isGlobal={true}
+                                showBoard={this.props.showBoard}
+                                activeBoardId={this.props.activeBoardId}
+                            />
+                        ))}
 
                         <Menu.Text
                             id='empty-template'
@@ -101,50 +117,6 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
         )
     }
 
-    private renderBoardTemplate(boardTemplate: Board, isGlobal = false): JSX.Element {
-        const {intl} = this.props
-
-        const displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
-
-        return (
-            <Menu.Text
-                key={boardTemplate.id}
-                id={boardTemplate.id}
-                name={displayName}
-                icon={<div className='Icon'>{boardTemplate.icon}</div>}
-                onClick={() => {
-                    if (isGlobal) {
-                        this.addBoardFromGlobalTemplate(boardTemplate.id)
-                    } else {
-                        this.addBoardFromTemplate(boardTemplate.id)
-                    }
-                }}
-                rightIcon={!isGlobal &&
-                    <MenuWrapper stopPropagationOnToggle={true}>
-                        <IconButton icon={<OptionsIcon/>}/>
-                        <Menu position='left'>
-                            <Menu.Text
-                                icon={<EditIcon/>}
-                                id='edit'
-                                name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
-                                onClick={() => {
-                                    this.props.showBoard(boardTemplate.id)
-                                }}
-                            />
-                            <Menu.Text
-                                icon={<DeleteIcon/>}
-                                id='delete'
-                                name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
-                                onClick={async () => {
-                                    await mutator.deleteBlock(boardTemplate, 'delete board template')
-                                }}
-                            />
-                        </Menu>
-                    </MenuWrapper>
-                }
-            />
-        )
-    }
 
     private addBoardClicked = async () => {
         const {showBoard, intl} = this.props
@@ -174,42 +146,6 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
         )
     }
 
-    private async addBoardFromGlobalTemplate(boardTemplateId: string) {
-        const oldBoardId = this.props.activeBoardId
-
-        await mutator.duplicateFromRootBoard(
-            boardTemplateId,
-            this.props.intl.formatMessage({id: 'Mutator.new-board-from-template', defaultMessage: 'new board from template'}),
-            false,
-            async (newBoardId) => {
-                this.props.showBoard(newBoardId)
-            },
-            async () => {
-                if (oldBoardId) {
-                    this.props.showBoard(oldBoardId)
-                }
-            },
-        )
-    }
-
-    private async addBoardFromTemplate(boardTemplateId: string) {
-        const oldBoardId = this.props.activeBoardId
-
-        await mutator.duplicateBoard(
-            boardTemplateId,
-            this.props.intl.formatMessage({id: 'Mutator.new-board-from-template', defaultMessage: 'new board from template'}),
-            false,
-            async (newBoardId) => {
-                this.props.showBoard(newBoardId)
-            },
-            async () => {
-                if (oldBoardId) {
-                    this.props.showBoard(oldBoardId)
-                }
-            },
-        )
-    }
-
     private addBoardTemplateClicked = async () => {
         const {activeBoardId} = this.props