From f4ff7c82af2ae24fe83df9756c45bae9404d2a9f Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Wed, 10 May 2023 15:44:05 -0300
Subject: [PATCH] fix: message re-rendering twice in a row (#5051)

---
 app/containers/message/Blocks.ts | 46 +++++++++++++++-----------------
 app/containers/message/index.tsx | 16 ++++++-----
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/app/containers/message/Blocks.ts b/app/containers/message/Blocks.ts
index b9e6223b3..278e0a205 100644
--- a/app/containers/message/Blocks.ts
+++ b/app/containers/message/Blocks.ts
@@ -1,37 +1,33 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { messageBlockWithContext } from '../UIKit/MessageBlock';
 import { IMessageBlocks } from './interfaces';
 
-const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
+const Blocks = ({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
 	if (blocks && blocks.length > 0) {
 		const appId = blocks[0]?.appId || '';
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const comp = useRef(
-			React.createElement(
-				messageBlockWithContext({
-					action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => {
-						if (blockAction) {
-							await blockAction({
-								actionId,
-								appId,
-								value,
-								blockId,
-								rid,
-								mid
-							});
-						}
-					},
-					appId,
-					rid
-				}),
-				{ blocks }
-			)
+		return React.createElement(
+			messageBlockWithContext({
+				action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => {
+					if (blockAction) {
+						await blockAction({
+							actionId,
+							appId,
+							value,
+							blockId,
+							rid,
+							mid
+						});
+					}
+				},
+				appId,
+				rid
+			}),
+			{ blocks }
 		);
-		return comp.current;
 	}
 	return null;
-});
+};
 
 Blocks.displayName = 'MessageBlocks';
 
diff --git a/app/containers/message/index.tsx b/app/containers/message/index.tsx
index ff309cfd8..920c68dcb 100644
--- a/app/containers/message/index.tsx
+++ b/app/containers/message/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Keyboard, ViewStyle } from 'react-native';
-import { Subscription } from 'rxjs';
 
 import Message from './Message';
 import MessageContext from './Context';
@@ -78,13 +77,16 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 
 	state = { isManualUnignored: false };
 
-	private subscription?: Subscription;
+	private subscription?: Function;
 
 	componentDidMount() {
 		const { item } = this.props;
-		if (item && item.observe) {
-			const observable = item.observe();
-			this.subscription = observable.subscribe(() => {
+		// @ts-ignore
+		if (item && item.experimentalSubscribe) {
+			// TODO: Update watermelonDB to recognize experimentalSubscribe at types
+			// experimentalSubscribe(subscriber: (isDeleted: boolean) => void, debugInfo?: any): Unsubscribe
+			// @ts-ignore
+			this.subscription = item.experimentalSubscribe(() => {
 				this.forceUpdate();
 			});
 		}
@@ -112,8 +114,8 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 	}
 
 	componentWillUnmount() {
-		if (this.subscription && this.subscription.unsubscribe) {
-			this.subscription.unsubscribe();
+		if (this.subscription) {
+			this.subscription();
 		}
 	}