diff --git a/webapp/channels/src/components/common/site_name_and_description.tsx b/webapp/channels/src/components/common/site_name_and_description.tsx
index 5f08f02065..05c9a83bbd 100644
--- a/webapp/channels/src/components/common/site_name_and_description.tsx
+++ b/webapp/channels/src/components/common/site_name_and_description.tsx
@@ -6,41 +6,27 @@ import {FormattedMessage} from 'react-intl';
 
 type Props = {
     customDescriptionText?: string;
-    siteName: string;
-}
+    siteName: string | undefined;
+};
+const SiteNameAndDescription = ({customDescriptionText, siteName = 'Mattermost'}: Props) => {
+    const description = customDescriptionText || (
+        <FormattedMessage
+            id='web.root.signup_info'
+            defaultMessage='All team communication in one place, searchable and accessible anywhere'
+        />
+    );
 
-export default class SiteNameAndDescription extends React.PureComponent<Props> {
-    public static defaultProps: Partial<Props> = {
-        siteName: 'Mattermost',
-    };
+    return (
+        <>
+            <h1 id='site_name'>{siteName}</h1>
+            <h3
+                id='site_description'
+                className='color--light'
+            >
+                {description}
+            </h3>
+        </>
+    );
+};
 
-    public render(): JSX.Element {
-        const {
-            customDescriptionText,
-            siteName,
-        } = this.props;
-        let description = null;
-        if (customDescriptionText) {
-            description = customDescriptionText;
-        } else {
-            description = (
-                <FormattedMessage
-                    id='web.root.signup_info'
-                    defaultMessage='All team communication in one place, searchable and accessible anywhere'
-                />
-            );
-        }
-
-        return (
-            <React.Fragment>
-                <h1 id='site_name'>{siteName}</h1>
-                <h3
-                    id='site_description'
-                    className='color--light'
-                >
-                    {description}
-                </h3>
-            </React.Fragment>
-        );
-    }
-}
+export default React.memo(SiteNameAndDescription);
diff --git a/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap b/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap
index 0ff60d22c7..4828af644d 100644
--- a/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap
+++ b/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`component/create_team should match snapshot default 1`] = `
     <div
       className="signup-team__container"
     >
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         customDescriptionText=""
         siteName=""
       />
diff --git a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
index 71819747a2..bc603267a9 100644
--- a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
+++ b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = `
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -129,7 +129,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on create team
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -214,7 +214,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -302,7 +302,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on loading 1`]
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <LoadingScreen />
@@ -378,7 +378,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -511,7 +511,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -602,7 +602,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div