[$500] Web - Chat - Console error "Uncaught TypeError" shows up when sending a message

[kbecciv]

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: 1.3.96.0
Reproducible in staging?: y
Reproducible in production?: n
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: Applause - Internal Team
Slack conversation:

Issue found when executing PR #29561

Action Performed:

1. Navigate to staging.new.expensify.com
2. Go to any chat.
3. Send a text.

Expected Result:

No console error shows up.

Actual Result:

Console error "Uncaught TypeError" shows up.

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

Bug6266672_1699316082231.20231107_074315.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0189b4f1ab639c484e
• Upwork Job ID: 1721795764122386432
• Last Price Increase: 2023-11-07
• Automatic offers:
• s-alves10 | Contributor | 27553747
• Ollyws | Contributor | 27880003

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @robertjchen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[dummy-1111]

Proposal

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

Console error shows when sending a message

What is the root cause of that problem?

App/src/components/InvertedFlatList/index.js

Line 27 in d5725c5

const listRef = React.createRef();

We should not use React.createRef in a function component because it recreates a new ref every time it is rendered

This is the root cause

Note: Why does this bug appears recently? Even though listRef is changed on every render, the listRef.current has the instance of FlatList after render. The change of listRef triggers the effect callback and so the innerRef.current has the instance of the FlatList. But introduction of MVCPFlatList in PR #28793 made things change.

Let's take a look at this component, Below is the ref callback function

App/src/components/FlatList/MVCPFlatList.js

Lines 147 to 156 in da2c79e

	(newRef) => {
	// Make sure to only call refs and re-attach listeners if the node changed.
	if (newRef == null || newRef === scrollRef.current) {
	return;
	}
	setMergedRef(newRef);
	prepareForMaintainVisibleContentPosition();
	setupMutationObserver();
	},

As you can see, we do nothing if newRef === scrollRef.current. scrollRef doesn't change once it's created. So this code segment runs only on mount. This means forwardedRef.current is set only once on mount. But as mentioned above, forwardedRef changes on every render and its current property has null value starting from the second render. That's why this potential issue appears recently.

I don't think the logic of onRef of MVCPFlatList is wrong because ref itself(not current) doesn't change once it's created. We should fix the use of React.createRef

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

Simply updating the above code to

    const listRef = useRef();

would solve the issue

Or we can remove the listRef from the component because it is not needed

Result

bandicam.2023-11-07.10-04-12-297.mp4

What alternative solutions did you explore? (Optional)

[robertjchen]

@s-alves10 Hm, looks like that change went in 3 months ago. Any idea why it would be erroring now and not earlier? 🤔

[dummy-1111]

Proposal

Updated

@robertjchen

I added the answer to your question #30935 (comment)

[melvin-bot]

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

[robertjchen]

Perfect, thanks for the explanation- let's move forward with your proposal.