stream-chat-react-native-core 3.8.2 → 3.9.0-next.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "3.8.2",
+  "version": "3.9.0-next.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,7 @@
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
 import {
   ChannelState,
   Channel as ChannelType,
@@ -21,8 +23,6 @@ import { useCreatePaginatedMessageListContext } from './hooks/useCreatePaginated
 import { useCreateThreadContext } from './hooks/useCreateThreadContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useTargetedMessage } from './hooks/useTargetedMessage';
-import { heavyDebounce } from './utils/debounce';
-import { lightThrottle } from './utils/throttle';
 
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
@@ -157,6 +157,17 @@ export const reactionData: ReactionData[] = [
  */
 const scrollToFirstUnreadThreshold = 4;
 
+const defaultThrottleInterval = 500;
+const defaultDebounceInterval = 500;
+const throttleOptions = {
+  leading: false,
+  trailing: true,
+};
+const debounceOptions = {
+  leading: true,
+  trailing: true,
+};
+
 /**
  * Number of unread messages to show in first frame, when channel loads at first
  * unread message. Only applicable if unread count > scrollToFirstUnreadThreshold.
@@ -359,6 +370,7 @@ export type ChannelPropsWithContext<
     quotedRepliesEnabled?: boolean;
     reactionsEnabled?: boolean;
     readEventsEnabled?: boolean;
+    stateUpdateThrottleInterval?: number;
     threadRepliesEnabled?: boolean;
     typingEventsEnabled?: boolean;
     uploadsEnabled?: boolean;
@@ -501,6 +513,7 @@ const ChannelWithContext = <
     sendImageAsync = false,
     setInputRef,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
+    stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader,
     supportedReactions = reactionData,
     t,
@@ -645,43 +658,65 @@ const ChannelWithContext = <
   /**
    * CHANNEL METHODS
    */
-  const markRead: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['markRead'] = lightThrottle(
-    () => {
-      if (channel?.disconnected || !channel?.getConfig?.()?.read_events) {
-        return;
-      }
-
-      if (doMarkReadRequest) {
-        doMarkReadRequest(channel);
-      } else {
-        logChatPromiseExecution(channel.markRead(), 'mark read');
-      }
-    },
-  );
-
-  const copyTypingState = lightThrottle(() => {
-    if (channel) {
-      setTyping({ ...channel.state.typing });
-    }
-  });
-
-  const copyReadState = lightThrottle(() => {
-    if (channel) {
-      setRead({ ...channel.state.read });
-    }
-  });
+  const markRead: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['markRead'] = useRef(
+    throttle(
+      () => {
+        if (channel?.disconnected || !channel?.getConfig?.()?.read_events) {
+          return;
+        }
 
-  const copyChannelState = lightThrottle(() => {
-    setLoading(false);
-    if (channel) {
-      setMembers({ ...channel.state.members });
-      setMessages([...channel.state.messages]);
-      setRead({ ...channel.state.read });
-      setTyping({ ...channel.state.typing });
-      setWatcherCount(channel.state.watcher_count);
-      setWatchers({ ...channel.state.watchers });
-    }
-  });
+        if (doMarkReadRequest) {
+          doMarkReadRequest(channel);
+        } else {
+          logChatPromiseExecution(channel.markRead(), 'mark read');
+        }
+      },
+      defaultThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
+  const copyTypingState = useRef(
+    throttle(
+      () => {
+        if (channel) {
+          setTyping({ ...channel.state.typing });
+        }
+      },
+      stateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
+  const copyReadState = useRef(
+    throttle(
+      () => {
+        if (channel) {
+          setRead({ ...channel.state.read });
+        }
+      },
+      stateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
+  const copyChannelState = useRef(
+    throttle(
+      () => {
+        setLoading(false);
+        if (channel) {
+          setMembers({ ...channel.state.members });
+          setMessages([...channel.state.messages]);
+          setRead({ ...channel.state.read });
+          setTyping({ ...channel.state.typing });
+          setWatcherCount(channel.state.watcher_count);
+          setWatchers({ ...channel.state.watchers });
+        }
+      },
+      stateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
 
   const connectionRecoveredHandler = () => {
     if (channel) {
@@ -1302,17 +1337,21 @@ const ChannelWithContext = <
     };
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreFinished = heavyDebounce(
-    (
-      updatedHasMore: boolean,
-      newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'],
-    ) => {
-      setLoadingMore(false);
-      setError(false);
-      setHasMore(updatedHasMore);
-      setMessages(newMessages);
-    },
-  );
+  const loadMoreFinished = useRef(
+    debounce(
+      (
+        updatedHasMore: boolean,
+        newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'],
+      ) => {
+        setLoadingMore(false);
+        setError(false);
+        setHasMore(updatedHasMore);
+        setMessages(newMessages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
 
   const loadMore: PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['loadMore'] = async (
     limit = 20,
@@ -1387,13 +1426,17 @@ const ChannelWithContext = <
   };
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreRecentFinished = heavyDebounce(
-    (newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages']) => {
-      setLoadingMoreRecent(false);
-      setMessages(newMessages);
-      setError(false);
-    },
-  );
+  const loadMoreRecentFinished = useRef(
+    debounce(
+      (newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages']) => {
+        setLoadingMoreRecent(false);
+        setMessages(newMessages);
+        setError(false);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
 
   const editMessage: InputMessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>['editMessage'] = (
     updatedMessage,
@@ -1468,16 +1511,20 @@ const ChannelWithContext = <
     }, [setThread, setThreadMessages]);
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreThreadFinished = heavyDebounce(
-    (
-      newThreadHasMore: boolean,
-      updatedThreadMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threads'][string],
-    ) => {
-      setThreadHasMore(newThreadHasMore);
-      setThreadLoadingMore(false);
-      setThreadMessages(updatedThreadMessages);
-    },
-  );
+  const loadMoreThreadFinished = useRef(
+    debounce(
+      (
+        newThreadHasMore: boolean,
+        updatedThreadMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threads'][string],
+      ) => {
+        setThreadHasMore(newThreadHasMore);
+        setThreadLoadingMore(false);
+        setThreadMessages(updatedThreadMessages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
 
   const loadMoreThread: ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['loadMoreThread'] =
     async () => {