fix: message re-rendering twice in a row (#5051)

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';
 

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();
 		}
 	}