fix: Prevent FlatList slow update on huge dataset (#78)

src/NetworkRequestInfo.ts

@@ -1,5 +1,5 @@
 import BlobFileReader from 'react-native/Libraries/Blob/FileReader';
-import { Headers, RequestMethod } from './types';
+import { Headers, NetworkRequestInfoRow, RequestMethod } from './types';
 import fromEntries from './utils/fromEntries';
 
 export default class NetworkRequestInfo {
@@ -82,6 +82,18 @@ export default class NetworkRequestInfo {
     return JSON.stringify(this.parseData(data), null, 2);
   }
 
+  public toRow(): NetworkRequestInfoRow {
+    return {
+      url: this.url,
+      gqlOperation: this.gqlOperation,
+      id: this.id,
+      method: this.method,
+      status: this.status,
+      duration: this.duration,
+      startTime: this.startTime,
+    };
+  }
+
   getRequestBody(replaceEscaped = false) {
     const body = this.stringifyFormat(this.dataSent);
 

src/components/NetworkLogger.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { Alert, View, StyleSheet, BackHandler, Share } from 'react-native';
 import logger from '../loggerSingleton';
 import NetworkRequestInfo from '../NetworkRequestInfo';
@@ -96,6 +96,10 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
     ]);
   };
 
+  const requestsInfo = useMemo(() => {
+    return requests.map((r) => r.toRow());
+  }, [requests]);
+
   return (
     <ThemeContext.Provider value={theme}>
       <View style={styles.visible}>
@@ -112,11 +116,11 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
             <Unmounted />
           ) : (
             <RequestList
-              requests={requests}
+              requestsInfo={requestsInfo}
               onShowMore={showMore}
               showDetails={showDetails && !!request}
-              onPressItem={(item) => {
-                setRequest(item);
+              onPressItem={(id) => {
+                setRequest(requests.find((r) => r.id === id));
                 setShowDetails(true);
               }}
             />

src/components/RequestList.tsx

@@ -1,40 +1,38 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, StyleSheet, FlatList } from 'react-native';
 import NetworkRequestInfo from '../NetworkRequestInfo';
 import { useThemedStyles, Theme } from '../theme';
 import ResultItem from './ResultItem';
 import Button from './Button';
 import SearchBar from './SearchBar';
+import { NetworkRequestInfoRow } from '../types';
 
 interface Props {
-  requests: NetworkRequestInfo[];
-  onPressItem: (item: NetworkRequestInfo) => void;
+  requestsInfo: NetworkRequestInfoRow[];
+  onPressItem: (item: NetworkRequestInfo['id']) => void;
   onShowMore: () => void;
   showDetails: boolean;
 }
 
 const RequestList: React.FC<Props> = ({
-  requests,
+  requestsInfo,
   onPressItem,
   onShowMore,
   showDetails,
 }) => {
   const styles = useThemedStyles(themedStyles);
 
   const [searchValue, onChangeSearchText] = useState('');
-  const [filteredRequests, setFilteredRequests] = useState(requests);
 
-  useEffect(() => {
-    const filtered = requests.filter((request) => {
+  const filteredRequests = useMemo(() => {
+    return requestsInfo.filter((request) => {
       const value = searchValue.toLowerCase().trim();
       return (
         request.url.toLowerCase().includes(value) ||
         request.gqlOperation?.toLowerCase().includes(value)
       );
     });
-
-    setFilteredRequests(filtered);
-  }, [requests, searchValue]);
+  }, [requestsInfo, searchValue]);
 
   return (
     <View style={styles.container}>
@@ -51,7 +49,7 @@ const RequestList: React.FC<Props> = ({
         )}
         data={filteredRequests}
         renderItem={({ item }) => (
-          <ResultItem request={item} onPress={() => onPressItem(item)} />
+          <ResultItem request={item} onPress={() => onPressItem(item.id)} />
         )}
       />
     </View>

src/components/ResultItem.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
-import NetworkRequestInfo from '../NetworkRequestInfo';
 import { Theme, useThemedStyles, useTheme } from '../theme';
 import { backHandlerSet } from '../backHandler';
+import { NetworkRequestInfoRow } from '../types';
 
 interface Props {
-  request: NetworkRequestInfo;
+  request: NetworkRequestInfoRow;
   onPress?(): void;
   style?: any;
 }

src/types.ts

@@ -1,3 +1,5 @@
+import NetworkRequestInfo from './NetworkRequestInfo';
+
 export type Headers = { [header: string]: string };
 
 export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
@@ -25,6 +27,11 @@ export type StartNetworkLoggingOptions = {
   forceEnable?: boolean;
 };
 
+export type NetworkRequestInfoRow = Pick<
+  NetworkRequestInfo,
+  'url' | 'gqlOperation' | 'id' | 'method' | 'status' | 'duration' | 'startTime'
+>;
+
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };