App: [HOLD for payment 2022-10-18] [$250] [Performance] Remove withOnyx() subscription in `BaseReportActionContextMenu` reported by @parasharrajat

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!


What performance issue do we need to solve?

inefficient React component rendering

What is the impact of this on end-users?

Slow to render chat. Takes more time to appear.

List any benchmarks that show the severity of the issue

Each BaseReportActionContextMenu needs to retrieve data for the betas key which can add significant overhead when rendering many comments in a chat.

Proposed solution (if any)

Like we did with the report action drafts we can use Context API for these subscriptions and it will have a slight impact on chat switching times.

Create a withBetas() and use it here:

https://github.com/Expensify/App/blob/b058975f68c53904a9724d1ccccb265f451f3649/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js#L74-L78

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Tbh, this is not making a huge difference, but it is added inefficiency we don’t need and cheap to fix. Anything that is rendering inside a list should be using Context and not creating many subscriptions via withOnyx.

Platform:

Where is this issue occurring?

  • Web
  • iOS
  • Android
  • Desktop App
  • Mobile Web

Version Number: 1.2.9-0 Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation Expensify/Expensify Issue URL:

View all open jobs on Upwork

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 25 (16 by maintainers)

Most upvoted comments

Thanks for the ping, sorry for the delay. @parasharrajat , please apply so I can hire to pay $250 to report @thesahindia , your paid $250 for C+ @aimane-chnaif , please apply to pay$250 for the job.

https://www.upwork.com/jobs/~010438a42aa105569a

@parasharrajat paid, everyone should be paid now, closing 👋

@aimane-chnaif paid, thanks! Waiting for @parasharrajat , moving to weekly.

Posted https://www.upwork.com/jobs/~010438a42aa105569a @thesahindia can you please review @aimane-chnaif 's proposal above and also apply for the job on Upwork? Thx

Proposal

+ const [withBetas, BetasProider] = createOnyxContext(ONYXKEYS.BETAS);

const propTypes = {
    /** Rendered child component */
    children: PropTypes.node.isRequired,
};

const OnyxProvider = props => (
    <ComposeProviders
        components={[
            NetworkProvider,
            PersonalDetailsProvider,
            ReportActionsDraftsProvider,
            CurrentDateProvider,
+           BetasProider,
        ]}
    >
        {props.children}
    </ComposeProviders>
);

OnyxProvider.displayName = 'OnyxProvider';
OnyxProvider.propTypes = propTypes;

export default OnyxProvider;

export {
    withNetwork,
    withPersonalDetails,
    withReportActionsDrafts,
    withCurrentDate,
+   withBetas,
};
- import {withOnyx} from 'react-native-onyx';
- import ONYXKEYS from '../../../../ONYXKEYS';
+ import {withBetas} from '../../../../components/OnyxProvider';

export default compose(
    withLocalize,
-   withOnyx({
-       betas: {
-           key: ONYXKEYS.BETAS,
-       },
-   }),
+   withBetas(),
    withWindowDimensions,
)(BaseReportActionContextMenu);