[Due for payment 2025-08-20] [$250] API Calls - Duplicate API call for OpenReport for new account

[mitarachim]

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: v9.1.82-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://docs.google.com/spreadsheets/d/1nPID07oiJkVDfW0GDmVYKrbmvse7V_3BnW-Rmyyr_Hs/edit?gid=292105974#gid=292105974, case 2990384
Email or phone of affected tester (no customers): any new account
Issue reported by: Applause Internal Team
Device used: Mac / Safari
App Component: Other

Action Performed:

"Setup

1. Open the Developer tools and open the Application tab
2. On Storage - Click on ""Clear Site Data"" - This will clear the cache and cookies of New Expensify ONLY
3. On the developer tools - Click on the network tab and hit the block icon to clear the calls

Steps

1. With the network tab open - Navigate to NewDot
2. Create a brand new account
3. Verify there's a single API call for OpenReport

Expected Result:

One API call for OpenReport

Actual Result:

Two API calls for OpenReport

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6891042_1752790714985.3_14_PM_2025-07-17.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947300976998515782
• Upwork Job ID: 1947300976998515782
• Last Price Increase: 2025-07-28

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

Triggered auto assignment to @NicMendonca (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.

[mkzie2]

Proposal

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

Two API calls for OpenReport

What is the root cause of that problem?

This useEffect is triggered twice because the route changes when we navigate to the onboarding flow.

App/src/pages/home/ReportScreen.tsx

Lines 555 to 561 in 5c2f566

	useEffect(() => {
	// This function is triggered when a user clicks on a link to navigate to a report.
	// For each link click, we retrieve the report data again, even though it may already be cached.
	// There should be only one openReport execution per page start or navigating
	fetchReport();
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [route, isLinkedMessagePageReady, reportActionIDFromRoute]);

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

We can prevent openReport from being called if this screen isn't focused

useEffect(() => {
    if (!isFocused) {
        return;
    }
    // This function is triggered when a user clicks on a link to navigate to a report.
    // For each link click, we retrieve the report data again, even though it may already be cached.
    // There should be only one openReport execution per page start or navigating
    fetchReport();
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, [route, isLinkedMessagePageReady, reportActionIDFromRoute, isFocused]);

App/src/pages/home/ReportScreen.tsx

Lines 555 to 561 in 5c2f566

	useEffect(() => {
	// This function is triggered when a user clicks on a link to navigate to a report.
	// For each link click, we retrieve the report data again, even though it may already be cached.
	// There should be only one openReport execution per page start or navigating
	fetchReport();
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [route, isLinkedMessagePageReady, reportActionIDFromRoute]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[dmkt9]

Proposal

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

Duplicate API call for OpenReport for new account

What is the root cause of that problem?

1. OpenReport API is called here:
   

   App/src/pages/home/ReportScreen.tsx

   Lines 561 to 567 in 79723e8

   	useEffect(() => {
   	// This function is triggered when a user clicks on a link to navigate to a report.
   	// For each link click, we retrieve the report data again, even though it may already be cached.
   	// There should be only one openReport execution per page start or navigating
   	fetchReport();
   	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
   	}, [route, isLinkedMessagePageReady, reportActionIDFromRoute]);

2. As we can see, it is wrapped in useEffect, so when ReportScreen re-mounts, it will re-fetch the data.
3. ReportScreen is re-mounted because of this:
   

   App/src/libs/actions/Welcome/OnboardingFlow.ts

   Lines 95 to 99 in 79723e8

   	navigationRef.resetRoot({
   	...navigationRef.getRootState(),
   	...adaptedState,
   	stale: true,
   	} as PartialState<NavigationState>);

   
   The current method helps preserve the route parameters, but it causes the key of the ReportsSplitNavigator route to change because adaptedState always has an empty ReportsSplitNavigator route. Therefore, ReportScreen will be re-mounted because the key changes.

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

We need to make sure that merging adaptedState does not affect existing routes:

App/src/libs/actions/Welcome/OnboardingFlow.ts

Lines 95 to 99 in 79723e8

	navigationRef.resetRoot({
	...navigationRef.getRootState(),
	...adaptedState,
	stale: true,
	} as PartialState<NavigationState>);

const rootState = navigationRef.getRootState();
const rootStateRouteNamesSet = new Set(rootState.routes.map((route) => route.name));
navigationRef.resetRoot({
    ...rootState,
    ...adaptedState,
    stale: true,
    routes: [...rootState.routes, ...(adaptedState?.routes.filter((route) => !rootStateRouteNamesSet.has(route.name)) ?? [])],
} as PartialState<NavigationState>);

Or you can specify the route to add directly via adaptedState.index.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Or we can use Navigation.navigate instead of navigationRef.resetRoot. Because Navigation.navigate will always stack into rootState without changing the key of the existing route.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@rojiphil Whoops! This issue is 2 days overdue. Let's get this updated quick!