Merge pull request Expensify#90461 from callstack-internal/perf/search-chat-list-item-self-fetch

perf(search): let ChatListItem fetch its own Onyx data

Author: mountiny

src/components/Search/SearchList/ListItem/ChatListItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import BaseListItem from '@components/SelectionList/ListItem/BaseListItem';
 import type {ListItem} from '@components/SelectionList/types';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
@@ -25,11 +26,11 @@ function ChatListItem<TItem extends ListItem>({
     onFocus,
     onLongPressRow,
     shouldSyncFocus,
-    personalDetails,
-    userBillingFundID,
 }: ChatListItemProps<TItem>) {
     const reportActionItem = item as unknown as ReportActionListItemType;
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem?.reportID}`);
+    const personalDetails = usePersonalDetails();
+    const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID);
     const styles = useThemeStyles();
     const theme = useTheme();
     const animatedHighlightStyle = useAnimatedHighlightStyle({

src/components/Search/SearchList/ListItem/types.ts

@@ -9,7 +9,6 @@ import type {
     CardList,
     LastPaymentMethod,
     PersonalDetails,
-    PersonalDetailsList,
     Policy,
     Report,
     ReportAction,
@@ -50,12 +49,6 @@ type SearchListActionProps = {
 type ChatListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
     /** The report data */
     report?: Report;
-
-    /** Personal details list */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-
-    /** User billing fund ID */
-    userBillingFundID: number | undefined;
 };
 
 type ExpenseReportListItemProps<TItem extends ListItem> = ListItemProps<TItem> &
@@ -290,9 +283,6 @@ type TaskListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
 
     /** All the data of the report collection */
     allReports?: OnyxCollection<Report>;
-
-    /** Personal details list */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 
 type TaskListItemType = ListItem &

src/components/Search/SearchList/index.tsx

@@ -9,7 +9,6 @@ import Animated, {Easing, FadeOutUp, LinearTransition} from 'react-native-reanim
 import Checkbox from '@components/Checkbox';
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
-import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import {PressableWithFeedback} from '@components/Pressable';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import ScrollView from '@components/ScrollView';
@@ -293,9 +292,7 @@ function SearchList({
     const [longPressedItem, setLongPressedItem] = useState<SearchListItem>();
 
     const hasItemsBeingRemoved = prevDataLength && prevDataLength > data.length;
-    const personalDetails = usePersonalDetails();
 
-    const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID);
     const [lastPaymentMethod] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD);
     const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
     const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
@@ -445,8 +442,6 @@ function SearchList({
                         personalPolicyID={personalPolicyID}
                         userBillingGracePeriodEnds={userBillingGracePeriodEnds}
                         ownerBillingGracePeriodEnd={ownerBillingGracePeriodEnd}
-                        personalDetails={personalDetails}
-                        userBillingFundID={userBillingFundID}
                         nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                         onFocus={onFocus}
                         newTransactionID={newTransactionID}
@@ -472,8 +467,6 @@ function SearchList({
             onCheckboxPress,
             canSelectMultiple,
             columns,
-            personalDetails,
-            userBillingFundID,
             lastPaymentMethod,
             personalPolicyID,
             userBillingGracePeriodEnds,