Fewer inbox tab renders (#587)

components/default-flat-list.tsx

@@ -331,6 +331,11 @@ const DefaultFlatList = forwardRef(<ItemT,>(props: DefaultFlatListProps<ItemT>,
   useImperativeHandle(ref, () => ({ refresh: onRefresh }), [onRefresh]);
 
   const onContentSizeChange = (width: number, height: number) => {
+    if (width === 0 && height === 0) {
+      // Measurement is inaccurate because the element is occluded
+      return;
+    }
+
     contentHeight.current = height;
 
     if (contentHeight.current < viewportHeight.current) {
@@ -343,7 +348,14 @@ const DefaultFlatList = forwardRef(<ItemT,>(props: DefaultFlatListProps<ItemT>,
   };
 
   const onLayout = useCallback((params) => {
-    viewportHeight.current = params.nativeEvent.layout.height;
+    const { height, width } = params.nativeEvent.layout;
+
+    if (width === 0 && height === 0) {
+      // Measurement is inaccurate because the element is occluded
+      return;
+    }
+
+    viewportHeight.current = height;
 
     if (contentHeight.current < viewportHeight.current) {
       fetchNextPage();

components/inbox-tab.tsx

@@ -29,6 +29,7 @@ import { signedInUser } from '../App';
 import { Notice } from './notice';
 import { listen, lastEvent } from '../events/events';
 import { useScrollbar } from './navigation/scroll-bar-hooks';
+import * as _ from "lodash";
 
 
 const Stack = createNativeStackNavigator();
@@ -104,7 +105,15 @@ const InboxTab = ({navigation}) => {
   useEffect(() => {
     return listen<Inbox | null>(
       'inbox',
-      (inbox) => setInbox(inbox ?? null),
+      (inbox) => {
+        setInbox((oldInbox) => {
+          if (_.isEqual(oldInbox, inbox)) {
+            return oldInbox ?? null
+          } else {
+            return inbox ?? null
+          }
+        });
+      },
       true
     );
   }, []);