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

app/containers/message/Blocks.ts

@@ -1,14 +1,12 @@
-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
+		return React.createElement(
-		const comp = useRef(
-			React.createElement(
 			messageBlockWithContext({
 				action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => {
 					if (blockAction) {
@@ -26,12 +24,10 @@ const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: IMessageBlocks
 				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) {
+		// @ts-ignore
-			const observable = item.observe();
+		if (item && item.experimentalSubscribe) {
-			this.subscription = observable.subscribe(() => {
+			// 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) {
+		if (this.subscription) {
-			this.subscription.unsubscribe();
+			this.subscription();
 		}
 	}