diff --git a/package/src/components/MessageMenu/MessageUserReactions.tsx b/package/src/components/MessageMenu/MessageUserReactions.tsx
index e8d17fd485..ee7dfe5da7 100644
--- a/package/src/components/MessageMenu/MessageUserReactions.tsx
+++ b/package/src/components/MessageMenu/MessageUserReactions.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
@@ -138,16 +138,20 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
[propReactions, fetchedReactions],
);
- const renderItem = ({ item }: { item: Reaction }) => (
-
+ const renderItem = useCallback(
+ ({ item }: { item: Reaction }) => (
+
+ ),
+ [MessageUserReactionsAvatar, MessageUserReactionsItem, supportedReactions],
);
- const renderHeader = () => (
- {t('Message Reactions')}
+ const renderHeader = useCallback(
+ () => {t('Message Reactions')},
+ [t, reactionsText],
);
const selectorReactions: ReactionSelectorItemType[] = messageReactions.map((reaction) => ({
diff --git a/package/src/components/MessageMenu/hooks/useFetchReactions.ts b/package/src/components/MessageMenu/hooks/useFetchReactions.ts
index b7f068847b..f67630a758 100644
--- a/package/src/components/MessageMenu/hooks/useFetchReactions.ts
+++ b/package/src/components/MessageMenu/hooks/useFetchReactions.ts
@@ -22,44 +22,47 @@ export const useFetchReactions = ({
const [next, setNext] = useState(undefined);
const messageId = message?.id;
- const { client, enableOfflineSupport } = useChatContext();
+ const { client } = useChatContext();
const sortString = useMemo(() => JSON.stringify(sort), [sort]);
- const fetchReactions = useCallback(async () => {
- if (!messageId) {
- return;
- }
- try {
- const response = await client.queryReactions(
- messageId,
- reactionType ? { type: reactionType } : {},
- sort,
- { limit, next },
- );
- if (response) {
- setReactions((prevReactions) =>
- next ? [...prevReactions, ...response.reactions] : response.reactions,
+ const fetchReactions = useCallback(
+ async (next: string | undefined) => {
+ if (!messageId) {
+ return;
+ }
+ try {
+ const response = await client.queryReactions(
+ messageId,
+ reactionType ? { type: reactionType } : {},
+ sort,
+ { limit, next },
);
- setNext(response.next);
- setLoading(false);
+ if (response) {
+ setNext(response.next);
+
+ setReactions((prevReactions) =>
+ next ? [...prevReactions, ...response.reactions] : response.reactions,
+ );
+ setLoading(false);
+ }
+ } catch (error) {
+ console.log('Error fetching reactions: ', error);
}
- } catch (error) {
- console.log('Error fetching reactions: ', error);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [client, messageId, reactionType, sortString, next, limit, enableOfflineSupport]);
+ },
+ [messageId, client, reactionType, sort, limit],
+ );
const loadNextPage = useCallback(async () => {
if (next) {
- await fetchReactions();
+ await fetchReactions(next);
}
}, [fetchReactions, next]);
useEffect(() => {
setReactions([]);
setNext(undefined);
- fetchReactions();
+ fetchReactions(undefined);
}, [fetchReactions, messageId, reactionType, sortString]);
useEffect(() => {