refactor: move handleAppBackground logics up in the component

Author: tsirlucas

package/src/components/Channel/Channel.tsx

@@ -610,6 +610,22 @@ const ChannelWithContext = <
     }
   }, [threadPropsExists]);
 
+  const handleAppBackground = useCallback(() => {
+    if (channel) {
+      channel.sendEvent({ parent_id: thread?.id, type: 'typing.stop' } as StreamEvent<
+        At,
+        Ch,
+        Co,
+        Ev,
+        Me,
+        Re,
+        Us
+      >);
+    }
+  }, [thread?.id, channelId]);
+
+  useAppStateListener(undefined, handleAppBackground);
+
   /**
    * CHANNEL CONSTANTS
    */
@@ -674,22 +690,6 @@ const ChannelWithContext = <
     }
   };
 
-  const handleAppBackground = useCallback(() => {
-    if (channel) {
-      channel.sendEvent({ parent_id: thread?.id, type: 'typing.stop' } as StreamEvent<
-        At,
-        Ch,
-        Co,
-        Ev,
-        Me,
-        Re,
-        Us
-      >);
-    }
-  }, [thread?.id, channelId]);
-
-  useAppStateListener(undefined, handleAppBackground);
-
   const handleEvent: EventHandler<At, Ch, Co, Ev, Me, Re, Us> = (event) => {
     if (thread) {
       const updatedThreadMessages =