diff --git a/web/markdown/markdown-spoiler.react.js b/web/markdown/markdown-spoiler.react.js
new file mode 100644
--- /dev/null
+++ b/web/markdown/markdown-spoiler.react.js
@@ -0,0 +1,22 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ReactElement } from 'lib/shared/markdown';
+
+type MarkdownSpoilerProps = {
+  +text: ReactElement,
+  +children?: React.Node,
+};
+
+function MarkdownSpoiler(props: MarkdownSpoilerProps): React.Node {
+  const { text } = props;
+
+  const memoizedSpoiler = React.useMemo(() => {
+    return <span>{text}</span>;
+  }, [text]);
+
+  return memoizedSpoiler;
+}
+
+export default MarkdownSpoiler;
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -9,6 +9,7 @@
 import type { RelativeMemberInfo } from 'lib/types/thread-types';
 
 import { useSelector } from '../redux/redux-utils';
+import MarkdownSpoiler from './markdown-spoiler.react';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
@@ -99,7 +100,7 @@
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
-      ) => <span>{output(node.content, state)}</span>,
+      ) => <MarkdownSpoiler text={output(node.content, state)} />,
     },
     inlineCode: SimpleMarkdown.defaultRules.inlineCode,
     em: SimpleMarkdown.defaultRules.em,