refactor: drop useReactiveValue from readOnly-aware hooks/components

useMessageComposerIsReadOnly, useFileUploadDropTarget, and ReactionMessageAction
all wrapped a roomCoordinator.readOnly(room, user) call in useReactiveValue
to pick up changes in the post-readonly permission.

Replace with usePermission('post-readonly', room._id) as an explicit
dependency of a plain useMemo — when the permission flips, the memo
re-runs and roomCoordinator.readOnly returns the up-to-date value
(hasPermission underneath is Tracker-aware but returns the current
value when no autorun is active).

Author: ggazzo

apps/meteor/client/components/message/toolbar/items/actions/ReactionMessageAction.tsx

@@ -6,12 +6,11 @@ import {
 	type IRoom,
 	type ISubscription,
 } from '@rocket.chat/core-typings';
-import { useUser, useEndpoint } from '@rocket.chat/ui-contexts';
-import { useCallback } from 'react';
+import { useUser, useEndpoint, usePermission } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useEmojiPickerData } from '../../../../../contexts/EmojiPickerContext';
-import { useReactiveValue } from '../../../../../hooks/useReactiveValue';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import EmojiElement from '../../../../../views/composer/EmojiPicker/EmojiElement';
 import { useChat } from '../../../../../views/room/contexts/ChatContext';
@@ -33,8 +32,10 @@ const ReactionMessageAction = ({ message, room, subscription }: ReactionMessageA
 	const isFederated = room && isRoomFederated(room);
 	const isFederationBlocked = isFederated && !isRoomNativeFederated(room);
 
-	const enabled = useReactiveValue(
-		useCallback(() => {
+	// depend on post-readonly so readOnly re-evaluates when the permission toggles at runtime.
+	const postReadOnly = usePermission('post-readonly', room._id);
+	const enabled = useMemo(
+		() => {
 			if (isFederationBlocked) {
 				return false;
 			}
@@ -48,7 +49,9 @@ const ReactionMessageAction = ({ message, room, subscription }: ReactionMessageA
 			}
 
 			return true;
-		}, [chat, room, subscription, message.private, user, isFederationBlocked]),
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[chat, room, subscription, message.private, user, isFederationBlocked, postReadOnly],
 	);
 
 	if (!enabled) {

apps/meteor/client/views/room/body/hooks/useFileUploadDropTarget.ts

@@ -1,10 +1,9 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { useSetting, useTranslation, useUser } from '@rocket.chat/ui-contexts';
+import { usePermission, useSetting, useTranslation, useUser } from '@rocket.chat/ui-contexts';
 import type { DragEvent, ReactNode } from 'react';
-import { useCallback, useMemo, useSyncExternalStore } from 'react';
+import { useMemo, useSyncExternalStore } from 'react';
 
 import { useDropTarget } from './useDropTarget';
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
 import { useIsRoomOverMacLimit } from '../../../omnichannel/hooks/useIsRoomOverMacLimit';
 import { useChat } from '../../contexts/ChatContext';
@@ -30,8 +29,11 @@ export const useFileUploadDropTarget = (): readonly [
 
 	const fileUploadEnabled = useSetting('FileUpload_Enabled', true);
 	const user = useUser();
-	const fileUploadAllowedForUser = useReactiveValue(
-		useCallback(() => !roomCoordinator.readOnly(room, { username: user?.username }), [room, user?.username]),
+	const postReadOnly = usePermission('post-readonly', room._id);
+	const fileUploadAllowedForUser = useMemo(
+		() => !roomCoordinator.readOnly(room, { username: user?.username }),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[room, user?.username, postReadOnly],
 	);
 
 	const chat = useChat();

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsReadOnly.ts

@@ -1,11 +1,14 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { useUser } from '@rocket.chat/ui-contexts';
-import { useCallback } from 'react';
+import { usePermission, useUser } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
 
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
 
 export const useMessageComposerIsReadOnly = (room: IRoom): boolean => {
 	const user = useUser();
-	return useReactiveValue(useCallback(() => roomCoordinator.readOnly(room, user), [room, user]));
+	// depend on post-readonly so this re-runs when the permission is granted/revoked at runtime;
+	// roomCoordinator.readOnly calls hasPermission internally and returns the up-to-date value.
+	const postReadOnly = usePermission('post-readonly', room._id);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	return useMemo(() => roomCoordinator.readOnly(room, user), [room, user, postReadOnly]);
 };