fix: Client application memory leaks

apps/meteor/app/utils/client/lib/SDKClient.ts

@@ -1,5 +1,6 @@
 import type { RestClientInterface } from '@rocket.chat/api-client';
 import type { SDK, ClientStream, StreamKeys, StreamNames, StreamerCallbackArgs, ServerMethods } from '@rocket.chat/ddp-client';
+import type { OffCallbackHandler } from '@rocket.chat/emitter';
 import { Emitter } from '@rocket.chat/emitter';
 import { Accounts } from 'meteor/accounts-base';
 import { DDPCommon } from 'meteor/ddp-common';
@@ -49,7 +50,7 @@ type EventMap<N extends StreamNames = StreamNames, K extends StreamKeys<N> = Str
 
 type StreamMapValue = {
 	stop: () => void;
-	error: (cb: (...args: any[]) => void) => void;
+	error: (cb: (...args: any[]) => void) => OffCallbackHandler;
 	onChange: ReturnType<ClientStream['subscribe']>['onChange'];
 	ready: () => Promise<void>;
 	isReady: boolean;
@@ -171,7 +172,9 @@ const createStreamManager = () => {
 
 		streamProxy.on(eventLiteral, proxyCallback);
 
-		const stop = (): void => {
+		const stream = streams.get(eventLiteral) || createNewMeteorStream(name, key, args);
+
+		const stopStreamListener = (): void => {
 			streamProxy.off(eventLiteral, proxyCallback);
 			// If someone is still listening, don't unsubscribe
 			if (streamProxy.has(eventLiteral)) {
@@ -184,22 +187,23 @@ const createStreamManager = () => {
 			}
 		};
 
-		const stream = streams.get(eventLiteral) || createNewMeteorStream(name, key, args);
-
 		stream.unsubList.add(stop);
 		if (!streams.has(eventLiteral)) {
 			streams.set(eventLiteral, stream);
 		}
 
-		stream.error(() => {
+		const stopErrorListener = stream.error(() => {
 			stream.unsubList.forEach((stop) => stop());
 		});
 
 		return {
 			id: '',
 			name,
 			params: data as any,
-			stop,
+			stop: () => {
+				stopStreamListener();
+				stopErrorListener();
+			},
 			ready: stream.ready,
 			onChange: stream.onChange,
 			isReady: stream.isReady,

apps/meteor/client/hooks/useReactiveQuery.ts

@@ -1,6 +1,7 @@
 import type { UseQueryOptions, QueryKey, UseQueryResult } from '@tanstack/react-query';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Tracker } from 'meteor/tracker';
+import { useEffect, useRef } from 'react';
 
 import { queueMicrotask } from '../lib/utils/queueMicrotask';
 
@@ -10,13 +11,18 @@ export const useReactiveQuery = <TQueryFnData, TData = TQueryFnData, TQueryKey e
 	options?: UseQueryOptions<TQueryFnData, Error, TData, TQueryKey>,
 ): UseQueryResult<TData, Error> => {
 	const queryClient = useQueryClient();
+	const computation = useRef<Tracker.Computation | null>(null);
+
+	useEffect(() => {
+		return () => computation.current?.stop();
+	}, []);
 
 	return useQuery({
 		queryKey,
 		queryFn: (): Promise<TQueryFnData> =>
 			new Promise((resolve, reject) => {
 				queueMicrotask(() => {
-					Tracker.autorun((c) => {
+					computation.current = Tracker.autorun((c) => {
 						const data = reactiveQueryFn();
 
 						if (c.firstRun) {

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

@@ -13,7 +13,7 @@ import {
 } from '@rocket.chat/ui-composer';
 import { useTranslation, useUserPreference, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
-import type { ReactElement, FormEvent, MouseEvent, ClipboardEvent } from 'react';
+import type { ReactElement, FormEvent, MouseEvent, ClipboardEvent, KeyboardEvent } from 'react';
 import { memo, useRef, useReducer, useCallback, useSyncExternalStore } from 'react';
 
 import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
@@ -330,19 +330,7 @@ const MessageBox = ({
 	const popupOptions = useComposerPopupOptions();
 	const popup = useComposerBoxPopup(popupOptions);
 
-	const keyDownHandlerCallbackRef = useCallback(
-		(node: HTMLTextAreaElement) => {
-			if (node === null) {
-				return;
-			}
-			node.addEventListener('keydown', (e: KeyboardEvent) => {
-				handler(e);
-			});
-		},
-		[handler],
-	);
-
-	const mergedRefs = useMessageComposerMergedRefs(popup.callbackRef, textareaRef, callbackRef, autofocusRef, keyDownHandlerCallbackRef);
+	const mergedRefs = useMessageComposerMergedRefs(popup.callbackRef, textareaRef, callbackRef, autofocusRef);
 
 	const shouldPopupPreview = useEnablePopupPreview(popup.filter, popup.option);
 
@@ -388,6 +376,7 @@ const MessageBox = ({
 				{isRecordingAudio && <AudioMessageRecorder rid={room._id} isMicrophoneDenied={isMicrophoneDenied} />}
 				<MessageComposerInput
 					ref={mergedRefs}
+					onKeyDown={handler}
 					aria-label={composerPlaceholder}
 					name='msg'
 					disabled={isRecording || !canSend}

apps/meteor/client/views/room/composer/messageBox/hooks/useMediaPermissions.ts

@@ -15,15 +15,19 @@ const getDeviceKind = (name: MediaDevices): MediaDeviceKind => {
 export const useMediaPermissions = (name: MediaDevices): [isPermissionDenied: boolean, setIsPermissionDenied: (state: boolean) => void] => {
 	const [isPermissionDenied, setIsPermissionDenied] = useState(false);
 
-	const handleMount = useEffectEvent(async (): Promise<void> => {
+	const handleMount = useEffectEvent(async (): Promise<(() => void) | void> => {
 		if (navigator.permissions) {
 			try {
 				const permissionStatus = await navigator.permissions.query({ name: name as PermissionName });
 				setIsPermissionDenied(permissionStatus.state === 'denied');
-				permissionStatus.onchange = (): void => {
-					setIsPermissionDenied(permissionStatus.state === 'denied');
-				};
-				return;
+
+				// We need this to be a function declaration so that we can use `this` parameter
+				// eslint-disable-next-line no-inner-declarations
+				function permissionChangeEvent(this: PermissionStatus) {
+					setIsPermissionDenied(this.state === 'denied');
+				}
+				permissionStatus.addEventListener('change', permissionChangeEvent);
+				return () => permissionStatus.removeEventListener('change', permissionChangeEvent);
 			} catch (error) {
 				console.warn(error);
 			}
@@ -44,7 +48,15 @@ export const useMediaPermissions = (name: MediaDevices): [isPermissionDenied: bo
 	});
 
 	useEffect(() => {
-		handleMount();
+		let offCallback;
+
+		const mount = async () => {
+			offCallback = await handleMount();
+		};
+
+		mount();
+
+		return offCallback;
 	}, [handleMount]);
 
 	return [isPermissionDenied, setIsPermissionDenied];

apps/meteor/client/views/room/hooks/useOpenRoom.ts

@@ -121,6 +121,12 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 	const queryClient = useQueryClient();
 	const { error } = result;
 
+	useEffect(() => {
+		return () => {
+			unsubscribeFromRoomOpenedEvent.current?.();
+		};
+	}, []);
+
 	useEffect(() => {
 		if (error) {
 			if (['l', 'v'].includes(type) && error instanceof RoomNotFoundError) {