stream-chat-react-native-core 6.7.3-beta.1 → 6.7.3-beta.3

package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx

@@ -61,7 +61,7 @@ describe("MessageInputContext's pickFile", () => {
     maxNumberOfFiles: 2,
   };
 
-  it.each([[3, 2]])(
+  it.each([[3, 1]])(
     'run pickFile when numberOfUploads is %d and alert is triggered %d number of times',
     async (numberOfUploads, numberOfTimesCalled) => {
       const { rerender, result } = renderHook(() => useMessageInputContext(), {
@@ -87,6 +87,7 @@ describe("MessageInputContext's pickFile", () => {
       });
 
       expect(Alert.alert).toHaveBeenCalledTimes(numberOfTimesCalled);
+      expect(Alert.alert).toHaveBeenCalledWith('Maximum number of files reached');
     },
   );
 

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -322,6 +322,7 @@ export type MessagesContextValue<
       messageInput?: string;
       threadMessages?: ChannelState<StreamChatGenerics>['threads'][string];
     },
+    throttled?: boolean,
   ) => void;
   /**
    * Custom UI component to display enriched url preview.

package/src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useStateStore';
+export * from './useStableCallback';

package/src/hooks/useStableCallback.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from 'react';
+
+export type StableCallback<A extends unknown[], R> = (...args: A) => R;
+
+/**
+ * A utility hook implementing a stable callback. It takes in an unstable method that
+ * is supposed to be invoked somewhere deeper in the DOM tree without making it
+ * change its reference every time the parent component rerenders. It will also return
+ * the value of the callback if it does return one.
+ * A common use-case would be having a function whose invocation depends on state
+ * somewhere high up in the DOM tree and wanting to use the same function deeper
+ * down, for example in a leaf node and simply using useCallback results in
+ * cascading dependency hell. If we wrap it in useStableCallback, we would be able
+ * to:
+ * - Use the same function as a dependency of another hook (since it is stable)
+ * - Still invoke it and get the latest state
+ *
+ * **Caveats:**
+ * - Never wrap a function that is supposed to return a React.ReactElement in
+ *   useStableCallback, since React will not know that the DOM needs to be updated
+ *   whenever the callback value changes (for example, renderItem from FlatList must
+ *   never be wrapped in this hook)
+ * - Always prefer using a standard useCallback/stable function wherever possible
+ *   (the purpose of useStableCallback is to bridge the gap between top level contexts
+ *   and cascading rereders in downstream components - **not** as an escape hatch)
+ * @param callback - the callback we want to stabilize
+ */
+export const useStableCallback = <A extends unknown[], R>(
+  callback: StableCallback<A, R>,
+): StableCallback<A, R> => {
+  const ref = useRef(callback);
+  ref.current = callback;
+
+  return useCallback<StableCallback<A, R>>((...args) => {
+    return ref.current(...args);
+  }, []);
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "6.7.3-beta.1"
+  "version": "6.7.3-beta.3"
 }