Merge pull request #949 from GetStream/vishal/us-is-mounted-ref

fix: fixed react warnings - Can not perform a React state update on an unmounted component [CRNS-444]

Author: vishalnarkhede

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
@@ -58,9 +59,10 @@ export const usePaginatedChannels = <
   const [loadingChannels, setLoadingChannels] = useState(false);
   const [loadingNextPage, setLoadingNextPage] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const isMounted = useIsMountedRef();
 
   const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
-    if (!client || loadingChannels || loadingNextPage || refreshing) return;
+    if (!client || loadingChannels || loadingNextPage || refreshing || !isMounted.current) return;
 
     if (queryType === 'reload') {
       setLoadingChannels(true);
@@ -79,6 +81,8 @@ export const usePaginatedChannels = <
     try {
       const channelQueryResponse = await client.queryChannels(filters, sort, newOptions);
 
+      if (!isMounted.current) return;
+
       channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));
 
       const newChannels =
@@ -92,6 +96,8 @@ export const usePaginatedChannels = <
     } catch (err) {
       await wait(2000);
 
+      if (!isMounted.current) return;
+
       if (retryCount === 3) {
         setLoadingChannels(false);
         setLoadingNextPage(false);

package/src/components/Chat/hooks/useIsOnline.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import { NetInfo } from '../../../native';
 
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
@@ -35,10 +36,9 @@ export const useIsOnline = <
   client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
   closeConnectionOnBackground = true,
 ) => {
-  const [unsubscribeNetInfo, setUnsubscribeNetInfo] = useState<NetInfoSubscription>();
   const [isOnline, setIsOnline] = useState(true);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
-
+  const isMounted = useIsMountedRef();
   const clientExits = !!client;
 
   const onBackground = useCallback(() => {
@@ -83,35 +83,34 @@ export const useIsOnline = <
       }
     };
 
-    const setConnectionListener = () => {
+    let unsubscribeNetInfo: NetInfoSubscription;
+    const setNetInfoListener = () => {
       NetInfo.fetch().then((netInfoState) => {
         notifyChatClient(netInfoState);
       });
-      setUnsubscribeNetInfo(
-        NetInfo.addEventListener((netInfoState) => {
-          notifyChatClient(netInfoState);
-        }),
-      );
+      unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
+        notifyChatClient(netInfoState);
+      });
     };
 
     const setInitialOnlineState = async () => {
       const status = await NetInfo.fetch();
-      setIsOnline(status);
+
+      if (isMounted.current) setIsOnline(status);
     };
 
     setInitialOnlineState();
+    const chatListeners: Array<ReturnType<StreamChat['on']>> = [];
+
     if (client) {
-      client.on('connection.changed', handleChangedEvent);
-      client.on('connection.recovered', handleRecoveredEvent);
-      setConnectionListener();
+      chatListeners.push(client.on('connection.changed', handleChangedEvent));
+      chatListeners.push(client.on('connection.recovered', handleRecoveredEvent));
+      setNetInfoListener();
     }
 
     return () => {
-      client.off('connection.changed', handleChangedEvent);
-      client.off('connection.recovered', handleRecoveredEvent);
-      if (unsubscribeNetInfo) {
-        unsubscribeNetInfo();
-      }
+      chatListeners.forEach((listener) => listener.unsubscribe?.());
+      unsubscribeNetInfo?.();
     };
   }, [clientExits]);
 

package/src/hooks/useIsMountedRef.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Returns mount status of component. This hook can be used for purpose of avoiding any
+ * setState calls (within async operation) after component gets unmounted.
+ *
+ * @example
+ * ```
+ * const isMounted = useIsMountedRef();
+ * const [dummyValue, setDummyValue] = useState(false);
+ *
+ * useEffect(() => {
+ *  someAsyncOperation().then(() => {
+ *    if (isMounted.current) setDummyValue(true);
+ *  })
+ * })
+ * ```
+ *
+ * @returns isMounted {Object} Mount status ref for the component.
+ */
+export const useIsMountedRef = () => {
+  // Initial value has been set to true, since this hook exist only for sole purpose of
+  // avoiding any setState calls (within async operation) after component gets unmounted.
+  // Basically we don't need to know about state change from component being initialized -> mounted.
+  // We only need a state change from initialized or mounted state -> unmounted state.
+  const isMounted = useRef(true);
+
+  useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    [],
+  );
+
+  return isMounted;
+};

package/src/hooks/useStreami18n.ts

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 
-import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+import { useIsMountedRef } from './useIsMountedRef';
 import { Streami18n } from '../utils/Streami18n';
 
+import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+
 export const useStreami18n = ({
   i18nInstance,
   setTranslators,
@@ -11,7 +13,7 @@ export const useStreami18n = ({
   i18nInstance?: Streami18n;
 }) => {
   const [loadingTranslators, setLoadingTranslators] = useState(true);
-
+  const isMounted = useIsMountedRef();
   const i18nInstanceExists = !!i18nInstance;
   useEffect(() => {
     let streami18n: Streami18n;
@@ -26,7 +28,7 @@ export const useStreami18n = ({
       setTranslators((prevTranslator) => ({ ...prevTranslator, t })),
     );
     streami18n.getTranslators().then((translator) => {
-      if (translator) setTranslators(translator);
+      if (translator && isMounted.current) setTranslators(translator);
     });
 
     setLoadingTranslators(false);