diff --git a/app/screens/reactions/index.ts b/app/screens/reactions/index.ts
index 0d76d0cd2..0bc13f15c 100644
--- a/app/screens/reactions/index.ts
+++ b/app/screens/reactions/index.ts
@@ -3,27 +3,25 @@
 
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
+import {of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
-import {MM_TABLES} from '@constants/database';
+import {observePost} from '@queries/servers/post';
 
 import Reactions from './reactions';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
-import type PostModel from '@typings/database/models/servers/post';
 
 type EnhancedProps = WithDatabaseArgs & {
     postId: string;
 }
 
-const {POST} = MM_TABLES.SERVER;
-
 const enhanced = withObservables([], ({postId, database}: EnhancedProps) => {
-    const post = database.get<PostModel>(POST).findAndObserve(postId);
+    const post = observePost(database, postId);
 
     return {
         reactions: post.pipe(
-            switchMap((p) => p.reactions.observe()),
+            switchMap((p) => (p ? p.reactions.observe() : of$(undefined))),
         ),
     };
 });
diff --git a/app/screens/reactions/reactions.tsx b/app/screens/reactions/reactions.tsx
index 6208e1a1e..fd8685416 100644
--- a/app/screens/reactions/reactions.tsx
+++ b/app/screens/reactions/reactions.tsx
@@ -15,14 +15,14 @@ import type ReactionModel from '@typings/database/models/servers/reaction';
 
 type Props = {
     initialEmoji: string;
-    reactions: ReactionModel[];
+    reactions?: ReactionModel[];
 }
 
 const Reactions = ({initialEmoji, reactions}: Props) => {
-    const [sortedReactions, setSortedReactions] = useState(Array.from(new Set(reactions.map((r) => getEmojiFirstAlias(r.emojiName)))));
+    const [sortedReactions, setSortedReactions] = useState(Array.from(new Set(reactions?.map((r) => getEmojiFirstAlias(r.emojiName)))));
     const [index, setIndex] = useState(sortedReactions.indexOf(initialEmoji));
     const reactionsByName = useMemo(() => {
-        return reactions.reduce((acc, reaction) => {
+        return reactions?.reduce((acc, reaction) => {
             const emojiAlias = getEmojiFirstAlias(reaction.emojiName);
             if (acc.has(emojiAlias)) {
                 const rs = acc.get(emojiAlias);
@@ -41,6 +41,9 @@ const Reactions = ({initialEmoji, reactions}: Props) => {
 
     const renderContent = useCallback(() => {
         const emojiAlias = sortedReactions[index];
+        if (!reactionsByName) {
+            return null;
+        }
 
         return (
             <>
@@ -61,11 +64,11 @@ const Reactions = ({initialEmoji, reactions}: Props) => {
 
     useEffect(() => {
         // This helps keep the reactions in the same position at all times until unmounted
-        const rs = reactions.map((r) => getEmojiFirstAlias(r.emojiName));
+        const rs = reactions?.map((r) => getEmojiFirstAlias(r.emojiName));
         const sorted = new Set([...sortedReactions]);
-        const added = rs.filter((r) => !sorted.has(r));
-        added.forEach(sorted.add, sorted);
-        const removed = [...sorted].filter((s) => !rs.includes(s));
+        const added = rs?.filter((r) => !sorted.has(r));
+        added?.forEach(sorted.add, sorted);
+        const removed = [...sorted].filter((s) => !rs?.includes(s));
         removed.forEach(sorted.delete, sorted);
         setSortedReactions(Array.from(sorted));
     }, [reactions]);
diff --git a/app/screens/reactions/reactors_list/reactor/index.ts b/app/screens/reactions/reactors_list/reactor/index.ts
index 3a3a19056..148b5a56a 100644
--- a/app/screens/reactions/reactors_list/reactor/index.ts
+++ b/app/screens/reactions/reactors_list/reactor/index.ts
@@ -1,33 +1,18 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Q} from '@nozbe/watermelondb';
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
-import {of as of$} from 'rxjs';
-import {switchMap} from 'rxjs/operators';
 
-import {MM_TABLES} from '@constants/database';
+import {observeUser} from '@app/queries/servers/user';
 import {WithDatabaseArgs} from '@typings/database/database';
 
 import Reactor from './reactor';
 
 import type ReactionModel from '@typings/database/models/servers/reaction';
-import type UserModel from '@typings/database/models/servers/user';
 
-const {SERVER: {USER}} = MM_TABLES;
-
-const enhance = withObservables(['reaction'], ({database, reaction}: {reaction: ReactionModel} & WithDatabaseArgs) => {
-    const user = database.get<UserModel>(USER).query(
-        Q.where('id', reaction.userId),
-        Q.take(1),
-    ).observe().pipe(
-        switchMap((result) => (result.length ? result[0].observe() : of$(undefined))),
-    );
-
-    return {
-        user,
-    };
-});
+const enhance = withObservables(['reaction'], ({database, reaction}: {reaction: ReactionModel} & WithDatabaseArgs) => ({
+    user: observeUser(database, reaction.userId),
+}));
 
 export default withDatabase(enhance(Reactor));