diff --git a/x-pack/plugins/apm/public/components/app/Main/UpdateBadge.tsx b/x-pack/plugins/apm/public/components/app/Main/UpdateBadge.tsx
deleted file mode 100644
index f7a48623e4b59..0000000000000
--- a/x-pack/plugins/apm/public/components/app/Main/UpdateBadge.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
-import React from 'react';
-import { UICapabilities } from 'ui/capabilities';
-import { injectUICapabilities } from 'ui/capabilities/react';
-import chrome from 'ui/chrome';
-
-interface Props {
-  uiCapabilities: UICapabilities;
-  intl: InjectedIntl;
-}
-
-class UpdateBadgeComponent extends React.Component<Props> {
-  public componentDidMount() {
-    const { uiCapabilities, intl } = this.props;
-    chrome.badge.set(
-      !uiCapabilities.apm.save
-        ? {
-            text: intl.formatMessage({
-              defaultMessage: 'Read only',
-              id: 'xpack.apm.header.badge.readOnly.text'
-            }),
-            tooltip: intl.formatMessage({
-              defaultMessage: 'Unable to save',
-              id: 'xpack.apm.header.badge.readOnly.tooltip'
-            }),
-            iconType: 'glasses'
-          }
-        : undefined
-    );
-  }
-
-  public render() {
-    return null;
-  }
-}
-
-export const UpdateBadge = injectUICapabilities(
-  injectI18n(UpdateBadgeComponent)
-);
diff --git a/x-pack/plugins/apm/public/components/app/Main/index.tsx b/x-pack/plugins/apm/public/components/app/Main/index.tsx
index 0d2d11f18bd9f..e38845cae0ef4 100644
--- a/x-pack/plugins/apm/public/components/app/Main/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/index.tsx
@@ -7,13 +7,12 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';
-import { UICapabilitiesProvider } from 'ui/capabilities/react';
 import { px, topNavHeight, unit, units } from '../../../style/variables';
 import { GlobalFetchIndicator } from './GlobalFetchIndicator';
 import { LicenseCheck } from './LicenseCheck';
 import { routes } from './routeConfig';
 import { ScrollToTopOnPathChange } from './ScrollToTopOnPathChange';
-import { UpdateBadge } from './UpdateBadge';
+import { useUpdateBadgeEffect } from './useUpdateBadgeEffect';
 import { UpdateBreadcrumbs } from './UpdateBreadcrumbs';
 
 const MainContainer = styled.div`
@@ -23,22 +22,21 @@ const MainContainer = styled.div`
 `;
 
 export function Main() {
+  useUpdateBadgeEffect();
+
   return (
-    <UICapabilitiesProvider>
-      <GlobalFetchIndicator>
-        <MainContainer data-test-subj="apmMainContainer">
-          <UpdateBreadcrumbs />
-          <UpdateBadge />
-          <Route component={ScrollToTopOnPathChange} />
-          <LicenseCheck>
-            <Switch>
-              {routes.map((route, i) => (
-                <Route key={i} {...route} />
-              ))}
-            </Switch>
-          </LicenseCheck>
-        </MainContainer>
-      </GlobalFetchIndicator>
-    </UICapabilitiesProvider>
+    <GlobalFetchIndicator>
+      <MainContainer data-test-subj="apmMainContainer">
+        <UpdateBreadcrumbs />
+        <Route component={ScrollToTopOnPathChange} />
+        <LicenseCheck>
+          <Switch>
+            {routes.map((route, i) => (
+              <Route key={i} {...route} />
+            ))}
+          </Switch>
+        </LicenseCheck>
+      </MainContainer>
+    </GlobalFetchIndicator>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/Main/useUpdateBadgeEffect.ts b/x-pack/plugins/apm/public/components/app/Main/useUpdateBadgeEffect.ts
new file mode 100644
index 0000000000000..47c95a5da5a70
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/Main/useUpdateBadgeEffect.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { useEffect } from 'react';
+import { capabilities } from 'ui/capabilities';
+import chrome from 'ui/chrome';
+
+export const useUpdateBadgeEffect = () => {
+  useEffect(() => {
+    const uiCapabilities = capabilities.get();
+    chrome.badge.set(
+      !uiCapabilities.apm.save
+        ? {
+            text: i18n.translate('xpack.apm.header.badge.readOnly.text', {
+              defaultMessage: 'Read only'
+            }),
+            tooltip: i18n.translate('xpack.apm.header.badge.readOnly.tooltip', {
+              defaultMessage: 'Unable to save'
+            }),
+            iconType: 'glasses'
+          }
+        : undefined
+    );
+  }, []);
+};