[HOLD for payment 2024-10-30] [$250] [DEV] - Console Warning: Function components cannot be given refs

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: Dev
Reproducible in staging?: dev
Reproducible in production?: dev
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @rojiphil
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1728537899975699

Action Performed:

1. Load/Reload the iOS App
2. Open a chat report with messages
3. Long press on a message to display the popover menu.

Expected Result:

The warning Function components cannot be given refs. should not come-up.

Actual Result:

The following warning is displayed:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

console-warning.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021845992163268596085
• Upwork Job ID: 1845992163268596085
• Last Price Increase: 2024-10-15
• Automatic offers:
• hoangzinh | Reviewer | 104449083

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[Shahidullah-Muffakir]

Proposal

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

We are facing a warning message in our iOS app that says, "Function components cannot be given refs." This warning appears when users try to interact with chat messages

What is the root cause of that problem?

The root cause of this problem is that some functional components in our app are being assigned refs, but they are not set up to handle them. In React, functional components do not accept refs by default, which leads to this warning.

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

To solve this problem, we should update the functional component by wrapping it with React.forwardRef(). This will allow these components to accept and properly use refs without generating warnings.

What alternative solutions did you explore? (Optional)

[jayeshmangwani]

Proposal

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

Encountering a console error: "Function components cannot be given refs" when long-pressing the message.

What is the root cause of that problem?

This specific issue is originating from the usage of withOnyx and wrapping it in memo on the BaseReportActionContextMenu file. We're also seeing the same error in the ReportScreen and Sidebar screens too, though those errors are coming from different files.

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

I suggest a similar approach as with this issue: we should replace withOnyx with useOnyx.

For this issue, we can focus on the BaseReportActionContextMenu and BaseKycWall files.

What alternative solutions did you explore? (Optional)

If right now we dont want to replace the usage of useOnyx instead of withOnyx then we can do use the forwardRef for BaseReportActionContextMenu like this:

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

Line 93 in 0510a66

function BaseReportActionContextMenu({

const BaseReportActionContextMenu = React.forwardRef(function BaseReportActionContextMenu({

[melvin-bot]

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

[melvin-bot]

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

[hoangzinh]

Thanks for all your proposals. Btw, @jayeshmangwani proposal looks good to me

Link to proposal #50676 (comment)

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @rlinoz, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rlinoz]

I think GH Actions will fail if we touch those files and don't replace the withOnyx call, so go with that in both places you mentioned

[melvin-bot]

📣 @hoangzinh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.52-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Migrated from withOnyx to useOnyx for KYCWall #50999

If no regressions arise, payment will be issued on 2024-10-30. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment automatic offer (Reviewer)
• @jayeshmangwani requires payment through NewDot Manual Requests
• @rojiphil requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hoangzinh / @jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR:
• [@hoangzinh / @jayeshmangwani] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hoangzinh / @jayeshmangwani] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hoangzinh / @jayeshmangwani] Determine if we should create a regression test for this bug.
• [@hoangzinh / @jayeshmangwani] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[garrettmknight]

@rojiphil did you work on this one at all or just report it?

[garrettmknight]

Payment Summary:

• Contributor: @jayeshmangwani $250 - submit once you've completed the checklist
• Contributor+: @hoangzinh $250 paid via upwork

[jayeshmangwani]

I don't think a checklist is needed here since these are console warning and should have been caught when we initially passed the ref to the functional component during creation or migration of the page.
Let me know if you think otherwise, @garrettmknight @hoangzinh

[hoangzinh]

Agreed @jayeshmangwani.

[rojiphil]

did you work on this one at all or just report it?

@garrettmknight I just reported it. No payment is due for me here. Thanks.

[garrettmknight]

Thanks, I'll undo the payment and we can close.

[garrettmknight]

@hoangzinh I accidentally requested a refund on this one in Upwork. Please decline.

[hoangzinh]

Okay, no worry @garrettmknight

[JmillsExpensify]

I confirm that this payment summary is accurate.

[garrettmknight]

$250 approved for @jayeshmangwani