fix: rerendering issues in sample app

Author: isekovanic

examples/SampleApp/App.tsx

@@ -75,7 +75,7 @@ const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createStackNavigator<UserSelectorParamList>();
 const App = () => {
-  const { chatClient, isConnecting, loginUser, logout, switchUser, unreadCount } = useChatClient();
+  const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
 
@@ -141,7 +141,7 @@ const App = () => {
             dark: colorScheme === 'dark',
           }}
         >
-          <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser, unreadCount }}>
+          <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser }}>
             {isConnecting && !chatClient ? (
               <LoadingScreen />
             ) : chatClient ? (

examples/SampleApp/src/components/UnreadCountBadge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStateStore, useTheme } from 'stream-chat-react-native';
 
@@ -31,7 +31,30 @@ export const ThreadsUnreadCountBadge: React.FC = () => {
 };
 
 export const ChannelsUnreadCountBadge: React.FC = () => {
-  const { unreadCount } = useAppContext();
+  const { chatClient } = useAppContext();
+  const [unreadCount, setUnreadCount] = useState<number>(0);
+  /**
+   * Listen to changes in unread counts and update the badge count
+   */
+  useEffect(() => {
+    const listener = chatClient?.on((e) => {
+      if (e.total_unread_count !== undefined) {
+        setUnreadCount(e.total_unread_count);
+      } else {
+        const countUnread = Object.values(chatClient.activeChannels).reduce(
+          (count, channel) => count + channel.countUnread(),
+          0,
+        );
+        setUnreadCount(countUnread);
+      }
+    });
+
+    return () => {
+      if (listener) {
+        listener.unsubscribe();
+      }
+    };
+  }, [chatClient]);
 
   return <UnreadCountBadge unreadCount={unreadCount} />;
 };

examples/SampleApp/src/context/AppContext.ts

@@ -9,7 +9,6 @@ type AppContextType = {
   loginUser: (config: LoginConfig) => void;
   logout: () => void;
   switchUser: (userId?: string) => void;
-  unreadCount: number | undefined;
 };
 
 export const AppContext = React.createContext({} as AppContextType);

examples/SampleApp/src/hooks/useChatClient.ts

@@ -70,7 +70,6 @@ messaging().setBackgroundMessageHandler(async (remoteMessage) => {
 export const useChatClient = () => {
   const [chatClient, setChatClient] = useState<StreamChat<StreamChatGenerics> | null>(null);
   const [isConnecting, setIsConnecting] = useState(true);
-  const [unreadCount, setUnreadCount] = useState<number>();
 
   const unsubscribePushListenersRef = useRef<() => void>();
 
@@ -92,9 +91,7 @@ export const useChatClient = () => {
       image: config.userImage,
       name: config.userName,
     };
-    const connectedUser = await client.connectUser(user, config.userToken);
-    const initialUnreadCount = connectedUser?.me?.total_unread_count;
-    setUnreadCount(initialUnreadCount);
+    await client.connectUser(user, config.userToken);
     await AsyncStore.setItem('@stream-rn-sampleapp-login-config', config);
 
     const permissionAuthStatus = await messaging().hasPermission();
@@ -197,35 +194,11 @@ export const useChatClient = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  /**
-   * Listen to changes in unread counts and update the badge count
-   */
-  useEffect(() => {
-    const listener = chatClient?.on((e) => {
-      if (e.total_unread_count !== undefined) {
-        setUnreadCount(e.total_unread_count);
-      } else {
-        const countUnread = Object.values(chatClient.activeChannels).reduce(
-          (count, channel) => count + channel.countUnread(),
-          0,
-        );
-        setUnreadCount(countUnread);
-      }
-    });
-
-    return () => {
-      if (listener) {
-        listener.unsubscribe();
-      }
-    };
-  }, [chatClient]);
-
   return {
     chatClient,
     isConnecting,
     loginUser,
     logout,
     switchUser,
-    unreadCount,
   };
 };

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useNavigation, useScrollToTop } from '@react-navigation/native';
 import { ChannelList, CircleClose, Search, useTheme } from 'stream-chat-react-native';
@@ -65,6 +65,8 @@ const options = {
   watch: true,
 };
 
+const HeaderNetworkDownIndicator = () => null;
+
 export const ChannelListScreen: React.FC = () => {
   const { chatClient } = useAppContext();
   const navigation = useNavigation();
@@ -106,9 +108,24 @@ export const ChannelListScreen: React.FC = () => {
     </View>
   );
 
-  const setScrollRef = (ref: FlatList<Channel<StreamChatGenerics>> | null) => {
+  const additionalFlatListProps = useMemo(() => ({
+    getItemLayout: (_, index) => ({
+      index,
+      length: 65,
+      offset: 65 * index,
+    }),
+    keyboardDismissMode: 'on-drag',
+  }), []);
+
+  const onSelect = useCallback((channel) => {
+    navigation.navigate('ChannelScreen', {
+      channel,
+    });
+  }, [navigation]);
+
+  const setScrollRef = useCallback( () => (ref: FlatList<Channel<StreamChatGenerics>> | null) => {
     scrollRef.current = ref;
-  };
+  }, []);
 
   if (!chatClient) {
     return null;
@@ -184,22 +201,11 @@ export const ChannelListScreen: React.FC = () => {
         <View style={{ flex: searchQuery ? 0 : 1 }}>
           <View style={[styles.channelListContainer, { opacity: searchQuery ? 0 : 1 }]}>
             <ChannelList<StreamChatGenerics>
-              additionalFlatListProps={{
-                getItemLayout: (_, index) => ({
-                  index,
-                  length: 65,
-                  offset: 65 * index,
-                }),
-                keyboardDismissMode: 'on-drag',
-              }}
+              additionalFlatListProps={additionalFlatListProps}
               filters={filters}
-              HeaderNetworkDownIndicator={() => null}
+              HeaderNetworkDownIndicator={HeaderNetworkDownIndicator}
               maxUnreadCount={99}
-              onSelect={(channel) => {
-                navigation.navigate('ChannelScreen', {
-                  channel,
-                });
-              }}
+              onSelect={onSelect}
               options={options}
               Preview={ChannelPreview}
               setFlatListRef={setScrollRef}