[$500] Create an ESLint rule to detect multiple uses of withOnyx

[tgolen]

Problem

When withOnyx is used multiple times while composing components, it adds overhead to what Onyx has to keep track of and also prevents optimizations like batched render updates from working to their full potential.

Solution

Create a custom ESLint in https://github.com/Expensify/eslint-config-expensify/tree/main/eslint-plugin-expensify which detects when withOnyx() is used multiple times in the same file, and throws an error. The error should give instructions on the best practices which is something like:

Only use withOnyx() once. If there are dependent Onyx keys, they can all be handled in a single instance of withOnyx through the use of selectors.

That should also link to the Onyx readme, and I'm going to write a specific section in there about the best practice that we can link to.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f185d4f92edd4f6c
• Upwork Job ID: 1702383017796775936
• Last Price Increase: 2023-09-14
• Automatic offers:
• mollfpr | Reviewer | 26743007
• studentofcoding | Contributor | 26743012

[melvin-bot]

Triggered auto assignment to @mallenexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f185d4f92edd4f6c

[melvin-bot]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[needpower]

Proposal

Please re-state the problem that we are trying to solve in this issue.

withOnyx() can be called multiple times while composing components.

What is the root cause of that problem?

Sometimes developers do not notice that withOnyx() is already called, and create a new call instead of extending the existing one.

What changes do you think we should make in order to solve the problem?

Create a new eslint rule in https://github.com/Expensify/eslint-config-expensify/blob/main/eslint-plugin-expensify/ called no-multiple-onyx-calls which will display an error message in case of multiple calls, e.g.

export default compose(
    withOnyx({
        isCheckingPublicRoom: {
            key: ONYXKEYS.IS_CHECKING_PUBLIC_ROOM,
            initWithStoredValues: false,
        }
    }),
    withOnyx({
        isSidebarLoaded: {
            key: ONYXKEYS.IS_SIDEBAR_LOADED,
        },
    })
)(Component)

What alternative solutions did you explore? (Optional)

N/A