Skip to content

Make InviteReceiptPartnerPolicyPage use new SelectionList #76279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+17 −11
Open

Make InviteReceiptPartnerPolicyPage use new SelectionList #76279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/SelectionList/BaseSelectionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function BaseSelectionList<TItem extends ListItem>({
onSelectAll,
onCheckboxPress,
onScrollBeginDrag,
onDismissError,
onEndReached,
onEndReachedThreshold,
confirmButtonOptions,
Expand Down Expand Up @@ -329,6 +330,7 @@ function BaseSelectionList<TItem extends ListItem>({
isFocused={isItemFocused}
isDisabled={isItemDisabled}
canSelectMultiple={canSelectMultiple}
onDismissError={onDismissError}
shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}
shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
rightHandSideComponent={rightHandSideComponent}
Expand Down
3 changes: 3 additions & 0 deletions src/components/SelectionList/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
/** Called when the list is scrolled and the user begins dragging */
onScrollBeginDrag?: () => void;

/** Callback to fire when an error is dismissed */
onDismissError?: (item: TItem) => void;

/** Called once when the scroll position gets within onEndReachedThreshold of the rendered content */
onEndReached?: () => void;

Expand Down
23 changes: 12 additions & 11 deletions src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
import * as Expensicons from '@components/Icon/Expensicons';
import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionListWithSections';
import type {ListItem} from '@components/SelectionListWithSections/types';
import UserListItem from '@components/SelectionListWithSections/UserListItem';
import SelectionList from '@components/SelectionList';
import UserListItem from '@components/SelectionList/ListItem/UserListItem';
import type {ListItem} from '@components/SelectionList/types';
import TabSelector from '@components/TabSelector/TabSelector';
import useDebouncedState from '@hooks/useDebouncedState';
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
Expand Down Expand Up @@ -247,7 +247,7 @@
[applyTabStatusFilter, getSearchStateForTab, members],
);

const buildSections = useCallback(

Check failure on line 250 in src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

'buildSections' is assigned a value but never used

Check failure on line 250 in src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'buildSections' is assigned a value but never used
(data: MemberForList[]) => [
{
title: undefined,
Expand Down Expand Up @@ -317,20 +317,21 @@
return (
<TabScreenWithFocusTrapWrapper>
<SelectionList
data={filteredMembers}
ListItem={UserListItem}
onSelectRow={() => {}}
onDismissError={dismissError}
listItemWrapperStyle={styles.cursorDefault}
style={{listItemWrapperStyle: styles.cursorDefault}}
Copy link
Contributor

@github-actions github-actions bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ PERF-4 (docs)

Creating a new object literal {listItemWrapperStyle: styles.cursorDefault} on every render breaks referential equality. If SelectionList or its children are later memoized, this will prevent optimization.

Suggested fix: Move the style object outside the render function or wrap it in useMemo:

const selectionListStyle = useMemo(() => ({
    listItemWrapperStyle: styles.cursorDefault,
}), [styles.cursorDefault]);

// Then use:
<SelectionList
    style={selectionListStyle}
    // ...
/>

addBottomSafeAreaPadding
Copy link
Contributor

@github-actions github-actions bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ PERF-4 (docs)

Creating a new textInputOptions object on every render creates unnecessary object allocations. This object contains several properties that change frequently (searchTerm, currentHeaderMessage), so memoization would help prevent unnecessary re-renders if child components are memoized.

Suggested fix: Wrap the textInputOptions object in useMemo:

const textInputOptions = useMemo(() => ({
    label: shouldShowTextInput ? translate('common.search') : undefined,
    value: searchTerm,
    onChangeText: setSearchTerm,
    headerMessage: currentHeaderMessage,
}), [shouldShowTextInput, translate, searchTerm, setSearchTerm, currentHeaderMessage]);

// Then use:
<SelectionList
    textInputOptions={textInputOptions}
    // ...
/>

shouldShowTextInput={shouldShowTextInput}
textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
textInputValue={searchTerm}
onChangeText={setSearchTerm}
headerMessage={currentHeaderMessage}
sections={buildSections(filteredMembers)}
textInputOptions={{
label: shouldShowTextInput ? translate('common.search') : undefined,
value: searchTerm,
onChangeText: setSearchTerm,
headerMessage: currentHeaderMessage,
}}
listEmptyContent={listEmptyContent}
shouldShowListEmptyContent={shouldShowListEmptyContent}
sectionListStyle={styles.pt3}
showListEmptyContent={shouldShowListEmptyContent}
/>
</TabScreenWithFocusTrapWrapper>
);
Expand Down
Loading