Remove Onyx.connect() for the key: ONYXKEYS.PERSONAL_DETAILS_LIST in src/libs/actions/Report.ts #76885
Conversation
|
|
lorretheboy
force-pushed
the
fix/73656
branch
from
5612955 to
d9553a3
Compare
melvin-bot
bot
requested review from
joekaufmanexpensify and
parasharrajat
and removed request for
a team
|
@parasharrajat Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| () => [styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, style], | ||
| [isHovered, style, styles.cursorPointer, styles.reportPreviewBoxHoverBorder], | ||
| ); | ||
| const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true}); |
There was a problem hiding this comment.
❌ PERF-3 [(docs)](https://github.com/Expensify/App/blob/main/.claude/agents/code-inline-reviewer.md#perf-3-use-onyxlistitemp rovider-hooks-instead-of-useonyx-in-renderitem)
This component is rendered inside a FlatList's renderItem function (via PureReportActionItem → ReportActionsListItemRenderer → ReportActionsList.renderItem). Using useOnyx for PERSONAL_DETAILS_LIST creates separate subscriptions for each list item, causing memory overhead and update cascades.
Instead, use the dedicated hook from OnyxListItemProvider:
import {usePersonalDetails} from '@components/OnyxListItemProvider';
// Inside component:
const personalDetails = usePersonalDetails();This provides optimized data access specifically designed for list rendering performance.
| const showReceiptErrorWithEmptyState = shouldShowReceiptEmptyState && !hasReceipt && !isEmptyObject(errors); | ||
|
|
||
| const [showConfirmDismissReceiptError, setShowConfirmDismissReceiptError] = useState(false); | ||
| const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true}); |
There was a problem hiding this comment.
❌ PERF-3 (docs)
This component is rendered inside a FlatList's renderItem function (via ReportActionsList.renderItem). Using useOnyx for PERSONAL_DETAILS_LIST creates separate subscriptions for each list item, causing memory overhead and update cascades.
Instead, use the dedicated hook from OnyxListItemProvider:
import {usePersonalDetails} from '@components/OnyxListItemProvider';
// Inside component:
const personalDetails = usePersonalDetails();This provides optimized data access specifically designed for list rendering performance.
|
@lorretheboy This PR is too big to test. Please break it into multiple PRs. |
|
Refactor, removing my review |
3 participants
Explanation of Change
Fixed Issues
$ #73656
PROPOSAL: #73656 (comment)
Tests
Offline tests
QA Steps
Same as Tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
ANDROID.mov
Android: mWeb Chrome
WEBSITE.ANDROID.mov
iOS: Native
ios_0AQlQiwu.mp4
iOS: mWeb Safari
WEBSITE.IOS.mov
MacOS: Chrome / Safari
WEBSITE.mov