chore: extract stable cb

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -74,6 +74,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 import { TypingProvider } from '../../contexts/typingContext/TypingContext';
+import { useStableCallback } from '../../hooks';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 
 import {
@@ -2108,10 +2109,3 @@ export const Channel = <
     />
   );
 };
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-const useStableCallback = <T extends Function>(callback: T): T => {
-  const ref = useRef<T>(callback);
-  ref.current = callback;
-  return useCallback(((...args: unknown[]) => ref.current(...args)) as unknown as T, []);
-};

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -1,11 +1,12 @@
-import { useCallback, useRef } from 'react';
+import { useRef } from 'react';
 
 import debounce from 'lodash/debounce';
 import { Channel, ChannelState, MessageResponse } from 'stream-chat';
 
 import { useChannelMessageDataState } from './useChannelDataState';
 
 import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useStableCallback } from '../../../hooks';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 import { findInMessagesByDate, findInMessagesById } from '../../../utils/utils';
 
@@ -80,7 +81,7 @@ export const useMessageListPagination = <
   /**
    * This function loads more messages before the first message in current channel state.
    */
-  const loadMore = useStableCallback(async (limit = 20) => {
+  const loadMore = useStableCallback(async (limit: number = 20) => {
     if (!channel.state.messagePagination.hasPrev) {
       return;
     }
@@ -109,7 +110,7 @@ export const useMessageListPagination = <
   /**
    * This function loads more messages after the most recent message in current channel state.
    */
-  const loadMoreRecent = useStableCallback(async (limit = 10) => {
+  const loadMoreRecent = useStableCallback(async (limit: number = 10) => {
     if (!channel.state.messagePagination.hasNext) {
       return;
     }
@@ -322,10 +323,3 @@ export const useMessageListPagination = <
     state,
   };
 };
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-const useStableCallback = <T extends Function>(callback: T): T => {
-  const ref = useRef<T>(callback);
-  ref.current = callback;
-  return useCallback(((...args: unknown[]) => ref.current(...args)) as unknown as T, []);
-};

package/src/components/MessageList/MessageList.tsx

@@ -53,6 +53,7 @@ import {
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
+import { useStableCallback } from '../../hooks';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -975,7 +976,6 @@ const MessageListWithContext = <
     }
   });
 
-  // @ts-expect-error will fix later
   const handleScroll: ScrollViewProps['onScroll'] = useStableCallback((event) => {
     const messageListHasMessages = processedMessageList.length > 0;
     const offset = event.nativeEvent.contentOffset.y;
@@ -1129,13 +1129,11 @@ const MessageListWithContext = <
     }
   });
 
-  // @ts-expect-error will fix later
   const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = useStableCallback((event) => {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
   });
 
-  // @ts-expect-error will fix later
   const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = useStableCallback((event) => {
     hasMoved && selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
@@ -1430,10 +1428,3 @@ export const MessageList = <
     />
   );
 };
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-export const useStableCallback = <T extends Function>(callback: T): T => {
-  const ref = useRef<T>(callback);
-  ref.current = callback;
-  return useCallback(((...args: unknown[]) => ref.current(...args)) as unknown as T, []);
-};

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,14 @@
+import { useCallback, useRef } from 'react';
+
+export type StableCallback<A extends unknown[], R> = (...args: A) => R;
+
+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);
+  }, []);
+};