Skip to content

[No QA] refactor: IOURequestStepScan clean-up, phase 4: fix react-hooks/exhaustive-deps warning #85642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
samranahm wants to merge 2 commits into
base: main
Choose a base branch
from
+12 −6
Open

[No QA] refactor: IOURequestStepScan clean-up, phase 4: fix react-hooks/exhaustive-deps warning #85642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e0d30b
phase 04: improve initial scan file validation and add missing useEf…
samranahm Mar 18, 2026
916cec9
fix typo
samranahm Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,6 @@ function IOURequestStepScan({
showCameraAlert();
Log.warn('Error taking photo', error);
});
// eslint-disable-next-line react-hooks/exhaustive-deps -- askForPermissions is not needed
}, [
cameraPermissionStatus,
isMultiScanEnabled,
Expand All @@ -437,9 +436,11 @@ function IOURequestStepScan({
initialTransactionID,
isEditing,
receiptFiles,
setReceiptFiles,
submitReceipts,
updateScanAndNavigate,
askForPermissions,
maybeCancelShutterSpan,
]);

const cameraLoadingReasonAttributes: SkeletonSpanReasonAttributes = {
Expand Down
15 changes: 10 additions & 5 deletions src/pages/iou/request/step/IOURequestStepScan/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useCallback, useEffect} from 'react';
import React, {useCallback, useEffect, useRef} from 'react';
import {RESULTS} from 'react-native-permissions';
import LocationPermissionModal from '@components/LocationPermissionModal';
import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
Expand Down Expand Up @@ -93,10 +93,17 @@ function IOURequestStepScan({
onLayout?.(setTestReceiptAndNavigate);
}, [onLayout, setTestReceiptAndNavigate]);

// When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, make the user star scanning flow from scratch.
const hasValidatedInitialScanFiles = useRef(false);

// When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, make the user start scanning flow from scratch.
// This is because until the request is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then
// the image ceases to exist. The best way for the user to recover from this is to start over from the start of the request process.
useEffect(() => {
if (hasValidatedInitialScanFiles.current) {
return;
}
hasValidatedInitialScanFiles.current = true;

Comment on lines 101 to +106
Copy link
Contributor

@bernhardoj bernhardoj Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds make sense, but the previous code only runs once, so I think we can ignore this.

let isAllScanFilesCanBeRead = true;

Promise.all(
Expand All @@ -122,9 +129,7 @@ function IOURequestStepScan({
removeTransactionReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
removeDraftTransactions(true);
});
// We want this hook to run on mounting only
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [setIsMultiScanEnabled, transactions]);

// this effect will pre-fetch location in web if the location permission is already granted to optimize the flow
useEffect(() => {
Expand Down
Loading