Repository navigation
[HOLD for payment 2024-10-30] [$250] [DEV] - Console Warning: Function components cannot be given refs #50676
Description
Activity
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.This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989
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
withOnyxand wrapping it inmemoon theBaseReportActionContextMenufile. 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
withOnyxwithuseOnyx.For this issue, we can focus on the
BaseReportActionContextMenuandBaseKycWallfiles.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:
const BaseReportActionContextMenu = React.forwardRef(function BaseReportActionContextMenu({
- changed the title
[-][DEV] - Console Warning: Function components cannot be given refs[/-][+][$250] [DEV] - Console Warning: Function components cannot be given refs[/+]on Oct 15, 2024 Job added to Upwork: https://www.upwork.com/jobs/~021845992163268596085
20 remaining items
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:
@rojiphil did you work on this one at all or just report it?
Payment Summary:
- Contributor: @jayeshmangwani $250 - submit once you've completed the checklist
- Contributor+: @hoangzinh $250 paid via upwork
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 @hoangzinhAgreed @jayeshmangwani.
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.
Thanks, I'll undo the payment and we can close.
@hoangzinh I accidentally requested a refund on this one in Upwork. Please decline.
Reacted by Vinh HoangOkay, no worry @garrettmknight
I confirm that this payment summary is accurate.
$250 approved for @jayeshmangwani
Metadata
Metadata
Labels
Type
Projects
- Status
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com 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:
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?
Screenshots/Videos
console-warning.mp4
Add any screenshot/video evidence
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @garrettmknight