diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index c0c335ca5efe..c1aaf88b14c4 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -131,6 +131,7 @@ function ReportActionItem(props) {
// Hide the message if it is being moderated for a higher offense, or is hidden by a moderator
// Removed messages should not be shown anyway and should not need this flow
+
useEffect(() => {
if (!props.action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT || _.isEmpty(props.action.message[0].moderationDecisions)) {
return;
@@ -146,7 +147,10 @@ function ReportActionItem(props) {
setIsHidden(true);
}
setModerationDecision(latestDecision.decision);
- }, [props.action.message, props.action.actionName]);
+
+ // props.action.message doesn't need to be a dependency, we only need to check the change of props.action.message[0].moderationDecisions
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.action.message[0].moderationDecisions, props.action.actionName]);
const toggleContextMenuFromActiveReportAction = useCallback(() => {
setIsContextMenuActive(ReportActionContextMenu.isActiveReportAction(props.action.reportActionID));
@@ -279,7 +283,7 @@ function ReportActionItem(props) {
: undefined,
]}
/>
- {props.displayAsGroup && hasBeenFlagged && (
+ {hasBeenFlagged && (
)}
- {!props.displayAsGroup && hasBeenFlagged && (
-
- )}
);
}