diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index ce607aa6a3c8..ea077fffbf53 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {memo} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
@@ -44,83 +44,82 @@ const defaultProps = {
     tooltipText: '',
 };
 
-class ReportActionItemFragment extends React.PureComponent {
-    render() {
-        switch (this.props.fragment.type) {
-            case 'COMMENT':
-                // If this is an attachment placeholder, return the placeholder component
-                if (this.props.isAttachment && this.props.loading) {
-                    return (
-                        <View style={[styles.chatItemAttachmentPlaceholder]}>
-                            <ActivityIndicator
-                                size="large"
-                                color={themeColors.textSupporting}
-                                style={[styles.flex1]}
-                            />
-                        </View>
-                    );
-                }
-
-                // Only render HTML if we have html in the fragment
-                return this.props.fragment.html !== this.props.fragment.text
-                    ? (
-                        <RenderHTML
-                            html={`<comment>${this.props.fragment.html + (this.props.fragment.isEdited ? '<edited></edited>' : '')}</comment>`}
-                        />
-                    ) : (
-                        <Text
-                            selectable={!canUseTouchScreen() || !this.props.isSmallScreenWidth}
-                            style={EmojiUtils.isSingleEmoji(this.props.fragment.text) ? styles.singleEmojiText : undefined}
-                        >
-                            {Str.htmlDecode(this.props.fragment.text)}
-                            {this.props.fragment.isEdited && (
-                                <Text
-                                    fontSize={variables.fontSizeSmall}
-                                    color={themeColors.textSupporting}
-                                >
-                                    {/* Native devices do not support margin between nested Text */}
-                                    <Text style={styles.w1}>{' '}</Text>
-                                    {this.props.translate('reportActionCompose.edited')}
-                                </Text>
-                            )}
-                        </Text>
-                    );
-            case 'TEXT':
+const ReportActionItemFragment = (props) => {
+    switch (props.fragment.type) {
+        case 'COMMENT':
+            // If this is an attachment placeholder, return the placeholder component
+            if (props.isAttachment && props.loading) {
                 return (
-                    <Tooltip text={this.props.tooltipText}>
-                        <Text
-                            selectable
-                            numberOfLines={this.props.isSingleLine ? 1 : undefined}
-                            style={[styles.chatItemMessageHeaderSender]}
-                        >
-                            {Str.htmlDecode(this.props.fragment.text)}
-                        </Text>
-                    </Tooltip>
+                    <View style={[styles.chatItemAttachmentPlaceholder]}>
+                        <ActivityIndicator
+                            size="large"
+                            color={themeColors.textSupporting}
+                            style={[styles.flex1]}
+                        />
+                    </View>
                 );
-            case 'LINK':
-                return <Text>LINK</Text>;
-            case 'INTEGRATION_COMMENT':
-                return <Text>REPORT_LINK</Text>;
-            case 'REPORT_LINK':
-                return <Text>REPORT_LINK</Text>;
-            case 'POLICY_LINK':
-                return <Text>POLICY_LINK</Text>;
+            }
 
-            // If we have a message fragment type of OLD_MESSAGE this means we have not yet converted this over to the
-            // new data structure. So we simply set this message as inner html and render it like we did before.
-            // This wil allow us to convert messages over to the new structure without needing to do it all at once.
-            case 'OLD_MESSAGE':
-                return <Text>OLD_MESSAGE</Text>;
-            default:
-                return <Text>fragment.text</Text>;
-        }
+            // Only render HTML if we have html in the fragment
+            return props.fragment.html !== props.fragment.text
+                ? (
+                    <RenderHTML
+                        html={`<comment>${props.fragment.html + (props.fragment.isEdited ? '<edited></edited>' : '')}</comment>`}
+                    />
+                ) : (
+                    <Text
+                        selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
+                        style={EmojiUtils.isSingleEmoji(props.fragment.text) ? styles.singleEmojiText : undefined}
+                    >
+                        {Str.htmlDecode(props.fragment.text)}
+                        {props.fragment.isEdited && (
+                            <Text
+                                fontSize={variables.fontSizeSmall}
+                                color={themeColors.textSupporting}
+                            >
+                                {/* Native devices do not support margin between nested Text */}
+                                <Text style={styles.w1}>{' '}</Text>
+                                {props.translate('reportActionCompose.edited')}
+                            </Text>
+                        )}
+                    </Text>
+                );
+        case 'TEXT':
+            return (
+                <Tooltip text={props.tooltipText}>
+                    <Text
+                        selectable
+                        numberOfLines={props.isSingleLine ? 1 : undefined}
+                        style={[styles.chatItemMessageHeaderSender]}
+                    >
+                        {Str.htmlDecode(props.fragment.text)}
+                    </Text>
+                </Tooltip>
+            );
+        case 'LINK':
+            return <Text>LINK</Text>;
+        case 'INTEGRATION_COMMENT':
+            return <Text>REPORT_LINK</Text>;
+        case 'REPORT_LINK':
+            return <Text>REPORT_LINK</Text>;
+        case 'POLICY_LINK':
+            return <Text>POLICY_LINK</Text>;
+
+        // If we have a message fragment type of OLD_MESSAGE this means we have not yet converted this over to the
+        // new data structure. So we simply set this message as inner html and render it like we did before.
+        // This wil allow us to convert messages over to the new structure without needing to do it all at once.
+        case 'OLD_MESSAGE':
+            return <Text>OLD_MESSAGE</Text>;
+        default:
+            return <Text>fragment.text</Text>;
     }
-}
+};
 
 ReportActionItemFragment.propTypes = propTypes;
 ReportActionItemFragment.defaultProps = defaultProps;
+ReportActionItemFragment.displayName = 'ReportActionItemFragment';
 
 export default compose(
     withWindowDimensions,
     withLocalize,
-)(ReportActionItemFragment);
+)(memo(ReportActionItemFragment));