From 60ffd00d3060ae31fd3a5550083d2209d966aec0 Mon Sep 17 00:00:00 2001
From: Tasnim Tantawi <101149675+tasnim0tantawi@users.noreply.github.com>
Date: Wed, 28 Aug 2024 12:03:41 +0300
Subject: [PATCH] [MM-57719] Convert form_error.tsx to function component
 (#27914)

* solve conflicts

* update snapshots

* Fix types

* update snapshots
---
 .../setting_picture.test.tsx.snap             |  24 ++--
 .../bleve_settings.test.tsx.snap              |   6 +-
 .../cluster_settings.test.tsx.snap            |  12 +-
 .../database_settings.test.tsx.snap           |   3 +-
 .../elasticsearch_settings.test.tsx.snap      |   6 +-
 .../message_export_settings.test.tsx.snap     |  12 +-
 .../__snapshots__/push_settings.test.tsx.snap |   6 +-
 .../schema_admin_settings.test.tsx.snap       |   6 +-
 .../custom_plugin_settings.test.tsx.snap      |  18 +--
 ...om_terms_of_service_settings.test.tsx.snap |  12 +-
 .../openid_convert.test.tsx.snap              |   5 +-
 ...ssion_system_scheme_settings.test.tsx.snap |  12 +-
 ...mission_team_scheme_settings.test.tsx.snap |  12 +-
 .../plugin_management.test.tsx.snap           |  45 +++----
 .../system_user_detail.test.tsx.snap          |  15 +--
 .../__snapshots__/add_emoji.test.tsx.snap     |   9 +-
 webapp/channels/src/components/form_error.tsx | 115 +++++++++---------
 .../abstract_command.test.tsx.snap            |   9 +-
 .../abstract_incoming_hook.test.tsx.snap      |  18 +--
 .../abstract_oauth_app.test.tsx.snap          |   6 +-
 .../abstract_outgoing_webhook.test.tsx.snap   |   3 +-
 .../__snapshots__/add_bot.test.tsx.snap       |   3 +-
 .../installed_oauth_app.test.tsx.snap         |   3 +-
 ...ct_outgoing_oauth_connection.test.tsx.snap |   8 +-
 ...dd_outgoing_oauth_connection.test.tsx.snap |   3 +-
 ...it_outgoing_oauth_connection.test.tsx.snap |   9 +-
 ...bstract_outgoing_oauth_connection.test.tsx |   2 +-
 27 files changed, 148 insertions(+), 234 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
index 8c0a2df159..a2e3fcfbc2 100644
--- a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
@@ -46,8 +46,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -151,8 +150,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -266,8 +264,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -393,8 +390,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -508,8 +504,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -635,8 +630,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -790,8 +784,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -945,8 +938,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
         className="setting-list-item"
       >
         <hr />
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
index 69fcbb601e..5c1b0d1873 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
@@ -193,9 +193,8 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -395,9 +394,8 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
index d1d3bd975b..5537bfa513 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
@@ -197,9 +197,8 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -405,9 +404,8 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -613,9 +611,8 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -821,9 +818,8 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
index 57d641aec6..44e4f72031 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
@@ -421,9 +421,8 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
index 26fa546847..728aedc333 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
@@ -492,9 +492,8 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -994,9 +993,8 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
index 431bf38195..0a9c2af51b 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
@@ -146,9 +146,8 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -417,9 +416,8 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -574,9 +572,8 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -845,9 +842,8 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
index 06065b8eb6..6965028354 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
@@ -179,9 +179,8 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -313,9 +312,8 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
index 806b0fec12..92c6f8035c 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
@@ -683,15 +683,13 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
index 582e392bcb..4d3c0592dc 100644
--- a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
@@ -188,15 +188,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>
@@ -242,15 +240,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>
@@ -446,15 +442,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
index 3d599f192e..79f2c8ff72 100644
--- a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
@@ -38,9 +38,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -87,9 +86,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -136,9 +134,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -185,9 +182,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/openid_convert/__snapshots__/openid_convert.test.tsx.snap b/webapp/channels/src/components/admin_console/openid_convert/__snapshots__/openid_convert.test.tsx.snap
index 0807c81b27..8c1f3d4a12 100644
--- a/webapp/channels/src/components/admin_console/openid_convert/__snapshots__/openid_convert.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/openid_convert/__snapshots__/openid_convert.test.tsx.snap
@@ -50,10 +50,7 @@ exports[`components/OpenIdConvert should match snapshot 1`] = `
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
+        <Memo(FormError) />
       </div>
     </div>
   </div>
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
index 20b383e05f..58959bb47f 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
@@ -459,9 +459,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -810,9 +809,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1161,9 +1159,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1512,9 +1509,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
index 29b1f9d8e6..e2f8df1fea 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
@@ -336,9 +336,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -727,9 +726,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1120,9 +1118,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1579,9 +1576,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
diff --git a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
index ee94b92715..8caef4bf9f 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
@@ -266,9 +266,8 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -543,9 +542,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -629,9 +627,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -906,9 +903,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1185,9 +1181,8 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1466,9 +1461,8 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1743,9 +1737,8 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1997,9 +1990,8 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -2274,9 +2266,8 @@ exports[`components/PluginManagement should match snapshot, text entered into th
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -2558,9 +2549,8 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -2898,9 +2888,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -3206,9 +3195,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -3514,9 +3502,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -3822,9 +3809,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -4162,9 +4148,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
index 18add55a61..ddb3aa51af 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
@@ -138,9 +138,8 @@ exports[`SystemUserDetail should match default snapshot 1`] = `
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -330,9 +329,8 @@ exports[`SystemUserDetail should match snapshot if MFA is enabled 1`] = `
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -522,9 +520,8 @@ exports[`SystemUserDetail should not show manage user settings button when user
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -723,9 +720,8 @@ exports[`SystemUserDetail should show manage user settings button as activated 1
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -915,9 +911,8 @@ exports[`SystemUserDetail should show manage user settings button as disabled wh
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
diff --git a/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap b/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
index 8afd84738a..b20438b95c 100644
--- a/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
+++ b/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
@@ -107,9 +107,8 @@ exports[`components/emoji/components/AddEmoji should match snapshot 1`] = `
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
           type="backstage"
         />
         <Link
@@ -283,9 +282,8 @@ exports[`components/emoji/components/AddEmoji should select a file and match sna
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
           type="backstage"
         />
         <Link
@@ -423,9 +421,8 @@ exports[`components/emoji/components/AddEmoji should update emoji name and match
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
           type="backstage"
         />
         <Link
diff --git a/webapp/channels/src/components/form_error.tsx b/webapp/channels/src/components/form_error.tsx
index e752fa301f..4d7bc45ec1 100644
--- a/webapp/channels/src/components/form_error.tsx
+++ b/webapp/channels/src/components/form_error.tsx
@@ -3,6 +3,9 @@
 
 import React from 'react';
 
+const TYPE_MODAL = 'modal';
+const TYPE_BACKSTAGE = 'backstage';
+
 // accepts either a single error or an array of errors
 type Props = {
     type?: React.ReactNode;
@@ -11,71 +14,71 @@ type Props = {
     iconClassName?: string;
     margin?: boolean;
     errors?: React.ReactNode[];
-}
+};
 
-export default class FormError extends React.PureComponent<Props> {
-    public static defaultProps = {
-        error: null,
-        errors: [],
-    };
-    public render() {
-        const {error = null, errors = [], iconClassName, margin, textClassName, type} = this.props;
+const EMPTY_ERROR_LIST: React.ReactNode[] = [];
 
-        if (!error && errors.length === 0) {
-            return null;
-        }
+const FormError: React.FC<Props> = ({
+    error = null,
+    errors = EMPTY_ERROR_LIST,
+    iconClassName,
+    margin,
+    textClassName,
+    type,
+}) => {
+    if (!error && errors.length === 0) {
+        return null;
+    }
 
-        // look for the first truthy error to display
-        let message = error;
+    // look for the first truthy error to display
+    let message = error;
 
-        if (!message) {
-            for (const err of errors) {
-                if (err) {
-                    message = err;
-                }
+    if (!message) {
+        for (const err of errors) {
+            if (err) {
+                message = err;
             }
         }
+    }
 
-        if (!message) {
-            return null;
-        }
-
-        if (type === 'modal') {
-            return (
-                <div className='form-group'>
-                    <label className='col-sm-12 has-error'>
-                        {message}
-                    </label>
-                </div>
-            );
-        }
-
-        if (type === 'backstage') {
-            return (
-                <div className='pull-left has-error'>
-                    <label className='control-label'>
-                        {message}
-                    </label>
-                </div>
-            );
-        }
-
-        if (margin) {
-            return (
-                <div className='form-group has-error'>
-                    <label className='control-label'>
-                        {message}
-                    </label>
-                </div>
-            );
-        }
+    if (!message) {
+        return null;
+    }
 
+    if (type === TYPE_MODAL) {
         return (
-            <div className={`col-sm-12 ${textClassName || 'has-error'}`}>
-                <label className='control-label'>
-                    <i className={`fa ${iconClassName || 'fa-exclamation-circle'}`}/> {message}
-                </label>
+            <div className='form-group'>
+                <label className='col-sm-12 has-error'>{message}</label>
             </div>
         );
     }
-}
+
+    if (type === TYPE_BACKSTAGE) {
+        return (
+            <div className='pull-left has-error'>
+                <label className='control-label'>{message}</label>
+            </div>
+        );
+    }
+
+    if (margin) {
+        return (
+            <div className='form-group has-error'>
+                <label className='control-label'>{message}</label>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`col-sm-12 ${textClassName || 'has-error'}`}>
+            <label className='control-label'>
+                <i
+                    className={`fa ${iconClassName || 'fa-exclamation-circle'}`}
+                />{' '}
+                {message}
+            </label>
+        </div>
+    );
+};
+
+export default React.memo(FormError);
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
index f71d87bf7a..3e198086bf 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
@@ -409,8 +409,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -858,8 +857,7 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -1307,8 +1305,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "server error",
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
index 5d0515d4c4..3c430f7db4 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
@@ -223,8 +223,7 @@ exports[`components/integrations/AbstractIncomingWebhook should call action func
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -484,8 +483,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot 1
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -745,8 +743,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -976,8 +973,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -1204,8 +1200,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -1465,8 +1460,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "serverError",
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap
index 99a8c72f14..096871471c 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap
@@ -264,8 +264,7 @@ https://test.com/callback2"
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
@@ -568,8 +567,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "serverError",
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
index 683939a466..d03e1b9973 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
@@ -309,8 +309,7 @@ callbackUrl2.com
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
diff --git a/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap b/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
index a4083dbbdc..5ed9f8a35c 100644
--- a/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
@@ -320,8 +320,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
       <div
         className="backstage-form__footer"
       >
-        <FormError
-          error={null}
+        <Memo(FormError)
           errors={
             Array [
               "",
diff --git a/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap b/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
index 4b44523391..bd87c22898 100644
--- a/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
@@ -298,9 +298,8 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
         />
       </div>
     </div>
-    <FormError
+    <Memo(FormError)
       error="error"
-      errors={Array []}
     />
     <div
       className="item-details__row"
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap
index 089cb8b9c9..d568d14b5f 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap
@@ -392,8 +392,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
               <div
                 className="backstage-form__footer"
               >
-                <FormError
-                  error={null}
+                <Memo(FormError)
                   errors={
                     Array [
                       "",
@@ -960,8 +959,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
               <div
                 className="backstage-form__footer"
               >
-                <FormError
-                  error={null}
+                <Memo(FormError)
                   errors={
                     Array [
                       "serverError",
@@ -989,7 +987,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
                       </FormattedMessage>
                     </label>
                   </div>
-                </FormError>
+                </Memo(FormError)>
                 <Link
                   className="btn btn-tertiary"
                   to="/test/integrations/outgoing-oauth2-connections"
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap
index 2b83c6e2a7..bf6e134c43 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap
@@ -384,8 +384,7 @@ exports[`components/integrations/AddOutgoingOAuthConnection should match snapsho
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
-                    error={null}
+                  <Memo(FormError)
                     errors={
                       Array [
                         "",
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap
index 4ef63d957b..7c94df7ded 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap
@@ -459,8 +459,7 @@ https://myothersite.com/api/v2"
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
-                    error={null}
+                  <Memo(FormError)
                     errors={
                       Array [
                         "",
@@ -1180,8 +1179,7 @@ https://myothersite.com/api/v2"
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
-                    error={null}
+                  <Memo(FormError)
                     errors={
                       Array [
                         "",
@@ -1900,8 +1898,7 @@ https://myothersite.com/api/v2"
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
-                    error={null}
+                  <Memo(FormError)
                     errors={
                       Array [
                         "",
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/abstract_outgoing_oauth_connection.test.tsx b/webapp/channels/src/components/integrations/outgoing_oauth_connections/abstract_outgoing_oauth_connection.test.tsx
index 474644b558..bda8ebaf2f 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/abstract_outgoing_oauth_connection.test.tsx
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/abstract_outgoing_oauth_connection.test.tsx
@@ -112,7 +112,7 @@ describe('components/integrations/AbstractOutgoingOAuthConnection', () => {
 
         expect(submitAction).not.toBeCalled();
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('FormError').exists()).toBe(true);
+        expect(wrapper.find('Memo(FormError)').exists()).toBe(true);
     });
 
     test('should call action function', async () => {