perf: message list performance (#3060)

* perf: cut MessageList rerenders in half

* fix: improper conflicts merging

* fix: make change android specific

* perf: make sure keyboard ctx does not recreate on every render

* perf: optimize prop for messagelist

* perf: skip reacting to own ws events if optimistic update happened

* perf: optimize FlatList props

* fix: message reactivity regression and stabilize renderItem

* chore: extract stable cb

* chore: add jsdoc

* perf: optimize message list creation

* chore: cleanup

* fix: change set to useMemo

* fix: add static value for default case too and revert testing change

Author: isekovanic

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import type { Channel as StreamChatChannel } from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
@@ -142,6 +142,14 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     setSelectedThread(undefined);
   });
 
+  const onThreadSelect = useCallback((thread) => {
+    setSelectedThread(thread);
+    navigation.navigate('ThreadScreen', {
+      channel,
+      thread,
+    });
+  }, [channel, navigation]);
+
   if (!channel || !chatClient) {
     return null;
   }
@@ -161,13 +169,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       >
         <ChannelHeader channel={channel} />
         <MessageList<StreamChatGenerics>
-          onThreadSelect={(thread) => {
-            setSelectedThread(thread);
-            navigation.navigate('ThreadScreen', {
-              channel,
-              thread,
-            });
-          }}
+          onThreadSelect={onThreadSelect}
         />
         <AITypingIndicatorView channel={channel} />
         <MessageInput />