Refactor HeaderView component#31671
Merged
roryabraham merged 1 commit intoExpensify:mainfrom Nov 28, 2023
Merged
Conversation
melvin-bot
bot
requested review from
robertKozik
and removed request for
a team
|
@robertKozik 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] |
Contributor
Reviewer Checklist
Screenshots/VideosAndroid: Nativeios.native.movAndroid: mWeb Chromeandroid.web.moviOS: Nativeios.native.moviOS: mWeb Safariios.web.movMacOS: Chrome / Safariweb.movMacOS: Desktopdesktop.mov |
robertKozik
approved these changes
Nov 22, 2023
roryabraham
approved these changes
Nov 28, 2023
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
55 tasks
6 tasks
Contributor
|
🚀 Deployed to production by https://github.com/mountiny in version: 1.4.5-7 🚀
|
| }, | ||
| policy: { | ||
| key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`, | ||
| selector: (policy) => _.pick(policy, ['name', 'avatar', 'pendingAction']), |
Contributor
There was a problem hiding this comment.
Question: doesn't this break the memoization (this is wrapped by memo()) if this selector is always returning a new instance of the sub-object picked?
Contributor
Author
There was a problem hiding this comment.
We only pick some fields to prevent unnecessary re-render. Does this break something or cause regression?
Contributor
There was a problem hiding this comment.
Does this break something or cause regression?
No that I know of, I just saw the code and got curious. I think it would be good to know if it makes the memo completely useless. If it does, it may have been better to just return the complete policy object 🤷
Contributor
There was a problem hiding this comment.
I'm assuming that the implementation of memo is not doing a deep comparison, it is just doing ===, but maybe I'm wrong about that.
Contributor
Author
There was a problem hiding this comment.
I think that fine because we are also using only memo in other places without callback comparison.
Contributor
There was a problem hiding this comment.
I think that fine because we are also using only memo in other places without callback comparison.
It could also be wrong there... I guess I'll have to test it :P
Contributor
Author
There was a problem hiding this comment.
Thanks, let me know if it has any problem.
Contributor
There was a problem hiding this comment.
I was able to test and I confirmed that I'm wrong, the memo is working fine.
In case you are interested, I tested by adding this code in ReportScreen to force it to re-render every second
const [forceRerender, setForceRerender] = useState(0);
useEffect(() => {
setTimeout(()=>{
setForceRerender(forceRerender + 1);
}, 1000);
}, [forceRerender])
console.log('ReportScreen rerender', forceRerender);
and also added a console log in HeaderView. I can see the ReportScreen rerender every second, but HeaderView rerender doesn't appear. If I remove the memo, the HeaderView rerender starts appearing every time ReportScreen rerenders.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Details
Replace
withWindowDimensionsandwithLocalizewith the hook accordingly and subscribe current policy of the report instead of get all policies onHeaderViewto prevent unnecessary re-rendersFixed Issues
$ #30724
PROPOSAL: #30724 (comment)
Tests
Offline tests
Same as above
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)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
Screen.Recording.2023-11-22.at.12.05.02.mov
Android: mWeb Chrome
Screen.Recording.2023-11-22.at.11.55.12.mov
iOS: Native
Screen.Recording.2023-11-22.at.12.07.59.mov
iOS: mWeb Safari
Screen.Recording.2023-11-22.at.11.47.08.mov
MacOS: Chrome / Safari
web-1.mov
MacOS: Desktop
Screen.Recording.2023-11-22.at.12.14.56.mov