diff --git a/webapp/channels/src/components/admin_console/openid_convert/openid_convert.tsx b/webapp/channels/src/components/admin_console/openid_convert/openid_convert.tsx
index ac7996f00ad..a2c57251d0c 100644
--- a/webapp/channels/src/components/admin_console/openid_convert/openid_convert.tsx
+++ b/webapp/channels/src/components/admin_console/openid_convert/openid_convert.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import type {AdminConfig} from '@mattermost/types/config';
@@ -25,23 +25,18 @@ type Props = BaseProps & {
         patchConfig: (config: DeepPartial<AdminConfig>) => Promise<ActionResult>;
     };
 };
-type State = {
-    serverError?: string;
-}
 
-export default class OpenIdConvert extends React.PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props);
+const OpenIdConvert = ({
+    disabled,
+    actions,
+    config,
+}: Props) => {
+    const [serverError, setServerError] = useState<string | undefined>(undefined);
 
-        this.state = {
-            serverError: undefined,
-        };
-    }
-
-    upgradeConfig = async (e: React.MouseEvent) => {
+    const upgradeConfig = async (e: React.MouseEvent) => {
         e.preventDefault();
 
-        const newConfig = JSON.parse(JSON.stringify(this.props.config));
+        const newConfig = JSON.parse(JSON.stringify(config));
 
         if (newConfig.Office365Settings.DirectoryId) {
             newConfig.Office365Settings.DiscoveryEndpoint = 'https://login.microsoftonline.com/' + newConfig.Office365Settings.DirectoryId + '/v2.0/.well-known/openid-configuration';
@@ -60,64 +55,64 @@ export default class OpenIdConvert extends React.PureComponent<Props, State> {
             newConfig[setting].TokenEndpoint = '';
         });
 
-        const {error: err} = await this.props.actions.patchConfig(newConfig);
+        const {error: err} = await actions.patchConfig(newConfig);
         if (err) {
-            this.setState({serverError: err.message});
+            setServerError(err.message);
         } else {
             getHistory().push('/admin_console/authentication/openid');
         }
     };
 
-    render() {
-        return (
-            <div className='OpenIdConvert'>
-                <div className='OpenIdConvert_imageWrapper'>
-                    <img
-                        className='OpenIdConvert_image'
-                        src={imagePath}
-                        alt='OpenId Convert Image'
-                    />
-                </div>
+    return (
+        <div className='OpenIdConvert'>
+            <div className='OpenIdConvert_imageWrapper'>
+                <img
+                    className='OpenIdConvert_image'
+                    src={imagePath}
+                    alt='OpenId Convert Image'
+                />
+            </div>
 
-                <div className='OpenIdConvert_copyWrapper'>
-                    <p>
+            <div className='OpenIdConvert_copyWrapper'>
+                <p>
+                    <FormattedMessage
+                        id='admin.openIdConvert.message'
+                        defaultMessage='You can now convert your OAuth2.0 configuration to OpenID Connect.'
+                    />
+                </p>
+                <div className='OpenIdConvert_actionWrapper'>
+                    <button
+                        className='btn'
+                        data-testid='openIdConvert'
+                        disabled={disabled}
+                        onClick={upgradeConfig}
+                    >
                         <FormattedMessage
-                            id='admin.openIdConvert.message'
-                            defaultMessage='You can now convert your OAuth2.0 configuration to OpenID Connect.'
+                            id='admin.openIdConvert.text'
+                            defaultMessage='Convert to OpenID Connect'
                         />
-                    </p>
-                    <div className='OpenIdConvert_actionWrapper'>
-                        <button
-                            className='btn'
-                            data-testid='openIdConvert'
-                            disabled={this.props.disabled}
-                            onClick={this.upgradeConfig}
-                        >
-                            <FormattedMessage
-                                id='admin.openIdConvert.text'
-                                defaultMessage='Convert to OpenID Connect'
-                            />
-                        </button>
-                        <ExternalLink
-                            className='btn-secondary'
-                            location='openid_convert'
-                            href='https://www.mattermost.com/default-openid-docs'
-                            data-testid='openIdLearnMore'
-                        >
-                            <FormattedMessage
-                                id='admin.openIdConvert.help'
-                                defaultMessage='Learn more'
-                            />
-                        </ExternalLink>
-                        <div
-                            className='error-message'
-                            data-testid='errorMessage'
-                        >
-                            <FormError error={this.state.serverError}/>
-                        </div>
+                    </button>
+                    <ExternalLink
+                        className='btn-secondary'
+                        location='openid_convert'
+                        href='https://www.mattermost.com/default-openid-docs'
+                        data-testid='openIdLearnMore'
+                    >
+                        <FormattedMessage
+                            id='admin.openIdConvert.help'
+                            defaultMessage='Learn more'
+                        />
+                    </ExternalLink>
+                    <div
+                        className='error-message'
+                        data-testid='errorMessage'
+                    >
+                        <FormError error={serverError}/>
                     </div>
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default memo(OpenIdConvert);