-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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
Remove exported getReport()
#40523
Remove exported getReport()
#40523
Conversation
@s77rt Initial testing and performance comparison seems promising. Ready for your review. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Resolve conflicts
src/libs/Notification/PushNotification/subscribeToReportCommentPushNotifications.ts
Outdated
Show resolved
Hide resolved
src/pages/home/ReportScreen.tsx
Outdated
const parentReportSelector = (report: OnyxEntry<OnyxTypes.Report>): OnyxEntry<OnyxTypes.Report> => | ||
report && { | ||
type: report.type, | ||
reportID: report.reportID, | ||
parentReportID: report.parentReportID, | ||
parentReportActionID: report.parentReportActionID, | ||
}; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How did you choose this selector? As far as I can tell there is no indication on what fields we are using from parentReport
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just deduced it from parentReport
's usages and thought that might improve performance. But it's trivial anyway.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also saw a technique used for memoized report
:
App/src/pages/home/ReportScreen.tsx
Lines 162 to 169 in a5989aa
/** | |
* Create a lightweight Report so as to keep the re-rendering as light as possible by | |
* passing in only the required props. | |
* | |
* Also, this plays nicely in contrast with Onyx, | |
* which creates a new object every time collection changes. Because of this we can't | |
* put this into onyx selector as it will be the same. | |
*/ |
I think we should apply to parentReport
as well. Wdyt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That sounds good to me
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated!
if (!originalReportID || originalReportID === report.reportID) { | ||
return; | ||
} | ||
const unsubscribeOnyx = onyxSubscribe({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@s77rt Instead of using reportOrID
approach, I used onyxSubscribe
to conditionally subscribe to originalReportID
, subscription with withOnyx
will increase the re-render count 40 times 😱.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Onyx.connect
should not be used in components. Can you check for other options?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm but this is onyxSubscribe
which I see was used a lot in components, for example ReportActionItemParentAction
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The usage there also does not follow our Onyx practices.
@gijoe0295 Any update on the use of |
@@ -88,4 +84,13 @@ export default withOnyx<SystemChatReportFooterMessageProps, SystemChatReportFoot | |||
key: ONYXKEYS.NVP_ACTIVE_POLICY_ID, | |||
initialValue: null, | |||
}, | |||
adminChatReport: { | |||
key: ({activePolicyID, policies}) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
activePolicyID
and policies
won't be available here. They are populated after withOnyx
. Let's use useOnyx
and we can avoid such problem
@@ -555,7 +574,7 @@ function ReportActionItem({ | |||
</ShowContextMenuContext.Provider> | |||
); | |||
} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_QUEUED) { | |||
const linkedReport = ReportUtils.isChatThread(report) ? ReportUtils.getReport(report.parentReportID) : report; | |||
const linkedReport = ReportUtils.isChatThread(report) ? parentReport : report; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks we can get ride of the parentReport
. We only need 2 props from the parent
- reportID which can be replaced by report.parentReportID
- ownerAccountID write an util function for that
@gijoe0295 Any updates on this? |
@gijoe0295 What is the status of this PR? Can you please finish it up? |
After the changes in #41465, |
@gijoe0295 Any updates here? |
@gijoe0295 What can I do to help get this moving along? |
Details
Remove exported
getReport
.Fixed Issues
$ #40316
PROPOSAL: #40316 (comment)
Tests
Offline tests
NA
QA Steps
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Screen.Recording.2024-04-22.at.03.19.21-source.mov
Android: mWeb Chrome
iOS: Native
Screen.Recording.2024-04-22.at.02.57.34-source.mov
Screen.Recording.2024-04-22.at.03.00.55-source.mov
iOS: mWeb Safari
Screen.Recording.2024-04-22.at.03.02.27-source.mov
MacOS: Chrome / Safari
MacOS: Desktop
desktop.mov