diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.jsx b/app/javascript/flavours/glitch/components/dismissable_banner.jsx
deleted file mode 100644
index 21063c9ed..000000000
--- a/app/javascript/flavours/glitch/components/dismissable_banner.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages } from 'react-intl';
-
-import { bannerSettings } from 'flavours/glitch/settings';
-
-import { IconButton } from './icon_button';
-
-const messages = defineMessages({
-  dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' },
-});
-
-class DismissableBanner extends PureComponent {
-
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    visible: !bannerSettings.get(this.props.id),
-  };
-
-  handleDismiss = () => {
-    const { id } = this.props;
-    this.setState({ visible: false }, () => bannerSettings.set(id, true));
-  };
-
-  render () {
-    const { visible } = this.state;
-
-    if (!visible) {
-      return null;
-    }
-
-    const { children, intl } = this.props;
-
-    return (
-      <div className='dismissable-banner'>
-        <div className='dismissable-banner__message'>
-          {children}
-        </div>
-
-        <div className='dismissable-banner__action'>
-          <IconButton icon='times' title={intl.formatMessage(messages.dismiss)} onClick={this.handleDismiss} />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(DismissableBanner);
diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.tsx b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
new file mode 100644
index 000000000..0fb002832
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
@@ -0,0 +1,47 @@
+import type { PropsWithChildren } from 'react';
+import { useCallback, useState } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { bannerSettings } from 'flavours/glitch/settings';
+
+import { IconButton } from './icon_button';
+
+const messages = defineMessages({
+  dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' },
+});
+
+interface Props {
+  id: string;
+}
+
+export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
+  id,
+  children,
+}) => {
+  const [visible, setVisible] = useState(!bannerSettings.get(id));
+  const intl = useIntl();
+
+  const handleDismiss = useCallback(() => {
+    setVisible(false);
+    bannerSettings.set(id, true);
+  }, [id]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className='dismissable-banner'>
+      <div className='dismissable-banner__message'>{children}</div>
+
+      <div className='dismissable-banner__action'>
+        <IconButton
+          icon='times'
+          title={intl.formatMessage(messages.dismiss)}
+          onClick={handleDismiss}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.jsx b/app/javascript/flavours/glitch/features/community_timeline/index.jsx
index ca11adb46..b65e41637 100644
--- a/app/javascript/flavours/glitch/features/community_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.jsx
@@ -12,7 +12,7 @@ import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
 import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 import { domain } from 'flavours/glitch/initial_state';
 
diff --git a/app/javascript/flavours/glitch/features/explore/links.jsx b/app/javascript/flavours/glitch/features/explore/links.jsx
index 88976c4ea..91a93935d 100644
--- a/app/javascript/flavours/glitch/features/explore/links.jsx
+++ b/app/javascript/flavours/glitch/features/explore/links.jsx
@@ -7,7 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 
 import Story from './components/story';
diff --git a/app/javascript/flavours/glitch/features/explore/statuses.jsx b/app/javascript/flavours/glitch/features/explore/statuses.jsx
index ce484ef77..8a301b6cd 100644
--- a/app/javascript/flavours/glitch/features/explore/statuses.jsx
+++ b/app/javascript/flavours/glitch/features/explore/statuses.jsx
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/actions/trends';
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import StatusList from 'flavours/glitch/components/status_list';
 import { getStatusList } from 'flavours/glitch/selectors';
 
diff --git a/app/javascript/flavours/glitch/features/explore/tags.jsx b/app/javascript/flavours/glitch/features/explore/tags.jsx
index e3a8a45fd..043cb6c79 100644
--- a/app/javascript/flavours/glitch/features/explore/tags.jsx
+++ b/app/javascript/flavours/glitch/features/explore/tags.jsx
@@ -7,7 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 
diff --git a/app/javascript/flavours/glitch/features/firehose/index.jsx b/app/javascript/flavours/glitch/features/firehose/index.jsx
index 53a39eb63..d28fb30ea 100644
--- a/app/javascript/flavours/glitch/features/firehose/index.jsx
+++ b/app/javascript/flavours/glitch/features/firehose/index.jsx
@@ -10,7 +10,7 @@ import { addColumn } from 'flavours/glitch/actions/columns';
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming';
 import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import SettingText from 'flavours/glitch/components/setting_text';
 import initialState, { domain } from 'flavours/glitch/initial_state';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx b/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx
index 3eb28c59a..bea883345 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import background from 'mastodon/../images/friends-cropped.png';
 
 
diff --git a/app/javascript/flavours/glitch/features/public_timeline/index.jsx b/app/javascript/flavours/glitch/features/public_timeline/index.jsx
index d059a8b4d..294bcdeee 100644
--- a/app/javascript/flavours/glitch/features/public_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.jsx
@@ -12,7 +12,7 @@ import { connectPublicStream } from 'flavours/glitch/actions/streaming';
 import { expandPublicTimeline } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
+import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 import { domain } from 'flavours/glitch/initial_state';