Refactor HeaderView component #31671
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] |
Reviewer Checklist
Screenshots/VideosAndroid: Nativeios.native.movAndroid: mWeb Chromeandroid.web.moviOS: Nativeios.native.moviOS: mWeb Safariios.web.movMacOS: Chrome / Safariweb.movMacOS: Desktopdesktop.mov |
|
✋ 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 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']), |
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?
There was a problem hiding this comment.
We only pick some fields to prevent unnecessary re-render. Does this break something or cause regression?
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 🤷
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.
There was a problem hiding this comment.
I think that fine because we are also using only memo in other places without callback comparison.
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
There was a problem hiding this comment.
Thanks, let me know if it has any problem.
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.
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