perf: optimize useShortMentionList#74069
Conversation
|
LGTM |
Codecov Report✅ All modified and coverable lines are covered by tests.
🚀 New features to boost your workflow:
|
| }) | ||
| .filter((login): login is string => !!login); | ||
| }, [currentUserPersonalDetails.login, personalDetails]); | ||
| }, [currentUserDomain, isCurrentUserPublicDomain, personalDetails]); |
There was a problem hiding this comment.
❌ PERF-6 (docs)
The useMemo dependency array uses derived values (currentUserDomain, isCurrentUserPublicDomain) instead of the source property they depend on (currentUserPersonalDetails.login). This reduces dependency tracking granularity and can cause issues with React's exhaustive-deps rules.
Suggested fix:
Move the domain extraction logic inside the useMemo and depend on the original property:
const availableLoginsList = useMemo(() => {
if (!personalDetails) {
return [];
}
const currentUserDomain = getEmailDomain(currentUserPersonalDetails.login ?? '');
const isCurrentUserPublicDomain = isDomainPublic(currentUserDomain);
return Object.values(personalDetails)
.map((personalDetail) => {
if (!personalDetail?.login || isCurrentUserPublicDomain) {
return;
}
const personalDetailDomain = getEmailDomain(personalDetail.login);
const isPersonalDetailPublicDomain = isDomainPublic(personalDetailDomain);
if (isPersonalDetailPublicDomain || personalDetailDomain !== currentUserDomain) {
return;
}
const [username] = personalDetail.login.split('@');
return username;
})
.filter((login): login is string => !!login);
}, [currentUserPersonalDetails.login, personalDetails]);
Reviewer Checklist
Screenshots/Videos |
|
Performance change, no product considerations. Unsubscribing and removing my review 👍 |
mountiny
left a comment
There was a problem hiding this comment.
Moving this ahead, but can you please follow up on Adding unit tests for those methods, this should be the default practice for any utils method even if its simple
| function isDomainPublic(domain: string): boolean { | ||
| return PUBLIC_DOMAINS_SET.has(domain); | ||
| } | ||
|
|
||
| /** | ||
| * Get the domain for an email | ||
| */ | ||
| function getEmailDomain(email: string): string { | ||
| return Str.extractEmailDomain(email).toLowerCase(); | ||
| } | ||
|
|
There was a problem hiding this comment.
Albeit very simple methods, can you please add unit tests for these?
There was a problem hiding this comment.
@mountiny sorry I forgot about doing that in this PR, I was in a hell of switching between contexts yesterday 😄 Will open a follow up PR shortly!
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/mountiny in version: 9.2.44-0 🚀
|
|
Follow up PR: #74314 |
|
🚀 Deployed to production by https://github.com/luacmartins in version: 9.2.44-5 🚀
|






Explanation of Change
Fixed Issues
$ #74088
PROPOSAL:
Tests
@Offline tests
n/a
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
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))npm run compress-svg)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
iOS: Native
ios.mov
iOS: mWeb Safari
ios-web.mov
MacOS: Chrome / Safari
web.mov
MacOS: Desktop
desktop.mov