diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 6e8b8ddc99..a0cf5a86ec 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -41,10 +41,11 @@ export default class ReactionDimension extends React.PureComponent {
         }
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.props.reactions !== nextProps.reactions) {
-            nextProps.reactions.on("Relations.add", this.onReactionsChange);
-            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+            this.onReactionsChange();
         }
     }
 
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 3172b8b44c..dad604a4d5 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -42,10 +42,11 @@ export default class ReactionsRow extends React.PureComponent {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.props.reactions !== nextProps.reactions) {
-            nextProps.reactions.on("Relations.add", this.onReactionsChange);
-            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+            this.onReactionsChange();
         }
     }