diff --git a/package-lock.json b/package-lock.json index 907b97e2334a..1fdbf41c3a21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -200,7 +200,7 @@ "babel-jest": "29.4.1", "babel-loader": "^9.1.3", "babel-plugin-module-resolver": "^5.0.0", - "babel-plugin-react-compiler": "^0.0.0-experimental-c23de8d-20240515", + "babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625", "babel-plugin-react-native-web": "^0.18.7", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-remove-console": "^6.9.4", @@ -219,7 +219,7 @@ "eslint-config-prettier": "^9.1.0", "eslint-plugin-jest": "^28.6.0", "eslint-plugin-jsdoc": "^46.2.6", - "eslint-plugin-react-compiler": "^0.0.0-experimental-53bb89e-20240515", + "eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625", "eslint-plugin-react-native-a11y": "^3.3.0", "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-testing-library": "^6.2.2", @@ -236,6 +236,7 @@ "portfinder": "^1.0.28", "prettier": "^2.8.8", "pusher-js-mock": "^0.3.3", + "react-compiler-healthcheck": "^0.0.0-experimental-b130d5f-20240625", "react-is": "^18.3.1", "react-native-clean-project": "^4.0.0-alpha4.0", "react-test-renderer": "18.2.0", @@ -20331,9 +20332,9 @@ } }, "node_modules/babel-plugin-react-compiler": { - "version": "0.0.0-experimental-c23de8d-20240515", - "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-0.0.0-experimental-c23de8d-20240515.tgz", - "integrity": "sha512-0XN2gmpT55QtAz5n7d5g91y1AuO9tRhWBaLgCRyc4ExHrlr7+LfxW+YTb3mOwxngkkiggwM8HyYsaEK9MqhnlQ==", + "version": "0.0.0-experimental-696af53-20240625", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-0.0.0-experimental-696af53-20240625.tgz", + "integrity": "sha512-OUDKms8qmcm5bX0D+sJWC1YcKcd7AZ2aJ7eY6gkR+Xr7PDfkXLbqAld4Qs9B0ntjVbUMEtW/PjlQrxDtY4raHg==", "dev": true, "dependencies": { "@babel/generator": "7.2.0", @@ -25297,9 +25298,9 @@ } }, "node_modules/eslint-plugin-react-compiler": { - "version": "0.0.0-experimental-53bb89e-20240515", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-0.0.0-experimental-53bb89e-20240515.tgz", - "integrity": "sha512-L3HV9qja1dnClRlR9aaWEJeJoGPH9cgjKq0sYqIOOH9uyWdVMH9CudsFr6yLva7dj05FpLZkiIaRSZJ3P/v6yQ==", + "version": "0.0.0-experimental-0998c1e-20240625", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-0.0.0-experimental-0998c1e-20240625.tgz", + "integrity": "sha512-npq2RomExoQI3jETs4OrifaygyJYgOcX/q74Q9OC7GmffLh5zSJaQpzjs2fi61NMNkJyIvTBD0C6sKTGGcetOw==", "dev": true, "dependencies": { "@babel/core": "^7.24.4", @@ -36758,6 +36759,98 @@ "react-dom": ">=16.8.0" } }, + "node_modules/react-compiler-healthcheck": { + "version": "0.0.0-experimental-b130d5f-20240625", + "resolved": "https://registry.npmjs.org/react-compiler-healthcheck/-/react-compiler-healthcheck-0.0.0-experimental-b130d5f-20240625.tgz", + "integrity": "sha512-vf3Ipg+f19yOYQeRP938e5jWNEpwR6EX5pwBZdJUF9rt11vJ3ckgUVcF5qGWUU/7DB0N9MH1koBqwqMYabrBiQ==", + "dev": true, + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "chalk": "4", + "fast-glob": "^3.3.2", + "ora": "5.4.1", + "yargs": "^17.7.2", + "zod": "^3.22.4", + "zod-validation-error": "^3.0.3" + }, + "bin": { + "react-compiler-healthcheck": "dist/index.js" + }, + "engines": { + "node": "^14.17.0 || ^16.0.0 || >= 18.0.0" + } + }, + "node_modules/react-compiler-healthcheck/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/react-compiler-healthcheck/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/react-compiler-healthcheck/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/react-compiler-healthcheck/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/react-compiler-healthcheck/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-compiler-healthcheck/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/react-compiler-runtime": { "resolved": "lib/react-compiler-runtime", "link": true diff --git a/package.json b/package.json index 7af1d82e2569..a6021b83c346 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "workflow-test": "./workflow_tests/scripts/runWorkflowTests.sh", "workflow-test:generate": "ts-node workflow_tests/utils/preGenerateTest.ts", "setup-https": "mkcert -install && mkcert -cert-file config/webpack/certificate.pem -key-file config/webpack/key.pem dev.new.expensify.com localhost 127.0.0.1", - "e2e-test-runner-build": "ncc build tests/e2e/testRunner.ts -o tests/e2e/dist/" + "e2e-test-runner-build": "ncc build tests/e2e/testRunner.ts -o tests/e2e/dist/", + "react-compiler-healthcheck": "react-compiler-healthcheck --verbose" }, "dependencies": { "@babel/plugin-proposal-private-methods": "^7.18.6", @@ -253,7 +254,7 @@ "babel-jest": "29.4.1", "babel-loader": "^9.1.3", "babel-plugin-module-resolver": "^5.0.0", - "babel-plugin-react-compiler": "^0.0.0-experimental-c23de8d-20240515", + "babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625", "babel-plugin-react-native-web": "^0.18.7", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-remove-console": "^6.9.4", @@ -272,7 +273,7 @@ "eslint-config-prettier": "^9.1.0", "eslint-plugin-jest": "^28.6.0", "eslint-plugin-jsdoc": "^46.2.6", - "eslint-plugin-react-compiler": "^0.0.0-experimental-53bb89e-20240515", + "eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625", "eslint-plugin-react-native-a11y": "^3.3.0", "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-testing-library": "^6.2.2", @@ -289,6 +290,7 @@ "portfinder": "^1.0.28", "prettier": "^2.8.8", "pusher-js-mock": "^0.3.3", + "react-compiler-healthcheck": "^0.0.0-experimental-b130d5f-20240625", "react-is": "^18.3.1", "react-native-clean-project": "^4.0.0-alpha4.0", "react-test-renderer": "18.2.0", diff --git a/patches/eslint-plugin-react-compiler+0.0.0-experimental-53bb89e-20240515.patch b/patches/eslint-plugin-react-compiler+0.0.0-experimental-53bb89e-20240515.patch deleted file mode 100644 index f81f70944dd2..000000000000 --- a/patches/eslint-plugin-react-compiler+0.0.0-experimental-53bb89e-20240515.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/node_modules/eslint-plugin-react-compiler/dist/index.js b/node_modules/eslint-plugin-react-compiler/dist/index.js -index a0f47a7..f649250 100644 ---- a/node_modules/eslint-plugin-react-compiler/dist/index.js -+++ b/node_modules/eslint-plugin-react-compiler/dist/index.js -@@ -69108,7 +69108,7 @@ const rule = { - return false; - } - let babelAST; -- if (context.filename.endsWith(".tsx") || context.filename.endsWith(".ts")) { -+ if (filename.endsWith(".tsx") || filename.endsWith(".ts")) { - try { - const { parse: babelParse } = require("@babel/parser"); - babelAST = babelParse(sourceCode, { diff --git a/patches/react-compiler-healthcheck+0.0.0-experimental-b130d5f-20240625.patch b/patches/react-compiler-healthcheck+0.0.0-experimental-b130d5f-20240625.patch new file mode 100644 index 000000000000..d7c02701a636 --- /dev/null +++ b/patches/react-compiler-healthcheck+0.0.0-experimental-b130d5f-20240625.patch @@ -0,0 +1,90 @@ +diff --git a/node_modules/react-compiler-healthcheck/dist/index.js b/node_modules/react-compiler-healthcheck/dist/index.js +index b427385..4bf23db 100755 +--- a/node_modules/react-compiler-healthcheck/dist/index.js ++++ b/node_modules/react-compiler-healthcheck/dist/index.js +@@ -69154,7 +69154,7 @@ var reactCompilerCheck = { + compile(source, path); + } + }, +- report() { ++ report(verbose) { + const totalComponents = + SucessfulCompilation.length + + countUniqueLocInEvents(OtherFailures) + +@@ -69164,6 +69164,50 @@ var reactCompilerCheck = { + `Successfully compiled ${SucessfulCompilation.length} out of ${totalComponents} components.` + ) + ); ++ ++ if (verbose) { ++ for (const compilation of [...SucessfulCompilation, ...ActionableFailures, ...OtherFailures]) { ++ const filename = compilation.fnLoc?.filename; ++ ++ if (compilation.kind === "CompileSuccess") { ++ const name = compilation.fnName; ++ const isHook = name?.startsWith('use'); ++ ++ if (name) { ++ console.log( ++ chalk.green( ++ `Successfully compiled ${isHook ? "hook" : "component" } [${name}](${filename})` ++ ) ++ ); ++ } else { ++ console.log(chalk.green(`Successfully compiled ${compilation.fnLoc?.filename}`)); ++ } ++ } ++ ++ if (compilation.kind === "CompileError") { ++ const { reason, severity, loc } = compilation.detail; ++ ++ const lnNo = loc.start?.line; ++ const colNo = loc.start?.column; ++ ++ const isTodo = severity === ErrorSeverity.Todo; ++ ++ console.log( ++ chalk[isTodo ? 'yellow' : 'red']( ++ `Failed to compile ${ ++ filename ++ }${ ++ lnNo !== undefined ? `:${lnNo}${ ++ colNo !== undefined ? `:${colNo}` : "" ++ }.` : "" ++ }` ++ ), ++ chalk[isTodo ? 'yellow' : 'red'](reason? `Reason: ${reason}` : "") ++ ); ++ console.log("\n"); ++ } ++ } ++ } + }, + }; + const JsFileExtensionRE = /(js|ts|jsx|tsx)$/; +@@ -69200,9 +69244,16 @@ function main() { + type: "string", + default: "**/+(*.{js,mjs,jsx,ts,tsx}|package.json)", + }) ++ .option('verbose', { ++ description: 'run with verbose logging', ++ type: 'boolean', ++ default: false, ++ alias: 'v', ++ }) + .parseSync(); + const spinner = ora("Checking").start(); + let src = argv.src; ++ let verbose = argv.verbose; + const globOptions = { + onlyFiles: true, + ignore: [ +@@ -69222,7 +69273,7 @@ function main() { + libraryCompatCheck.run(source, path); + } + spinner.stop(); +- reactCompilerCheck.report(); ++ reactCompilerCheck.report(verbose); + strictModeCheck.report(); + libraryCompatCheck.report(); + }); diff --git a/src/Expensify.tsx b/src/Expensify.tsx index bfe4db13d9c4..f96c51961acc 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -208,7 +208,7 @@ function Expensify({ } appStateChangeListener.current.remove(); }; - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want this effect to run again }, []); // This is being done since we want to play sound even when iOS device is on silent mode, to align with other platforms. diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index a112b36705c3..4de286183ea8 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -153,7 +153,7 @@ function AddPlaidBankAccount({ return unsubscribeToNavigationShortcuts; // disabling this rule, as we want this to run only on the first render - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 3319a28c58b9..1eb272dce49a 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -135,7 +135,7 @@ function AmountForm( setNewAmount(MoneyRequestUtils.stripDecimalsFromAmount(currentAmount)); // we want to update only when decimals change (setNewAmount also changes when decimals change). - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [decimals]); /** diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index 2fb3e3167ff8..6de7d0c2b013 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -37,6 +37,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, }} duration={CONST.ANIMATED_TRANSITION} animation={animationStyle} + // eslint-disable-next-line react-compiler/react-compiler useNativeDriver={useNativeDriver} style={style} > diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 450a49403215..368347847890 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -265,7 +265,7 @@ function AttachmentModal({ } setIsModalOpen(false); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isModalOpen, isConfirmButtonDisabled, onConfirm, file, sourceState]); /** @@ -367,7 +367,7 @@ function AttachmentModal({ onModalClose(); } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [onModalClose]); /** @@ -428,7 +428,7 @@ function AttachmentModal({ }); } return menuItems; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isReceiptAttachment, transaction, file, sourceState, iouType]); // There are a few things that shouldn't be set until we absolutely know if the file is a receipt or an attachment. diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx index 154fcf838c86..7d4fbd97f4f7 100644 --- a/src/components/AttachmentPicker/index.native.tsx +++ b/src/components/AttachmentPicker/index.native.tsx @@ -222,6 +222,7 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s * @param onCanceledHandler A callback that will be called without a selected attachment */ const open = (onPickedHandler: (file: FileObject) => void, onCanceledHandler: () => void = () => {}) => { + // eslint-disable-next-line react-compiler/react-compiler completeAttachmentSelection.current = onPickedHandler; onCanceled.current = onCanceledHandler; setIsVisible(true); diff --git a/src/components/AttachmentPicker/index.tsx b/src/components/AttachmentPicker/index.tsx index a6ff9cb8d27a..669b26724a02 100644 --- a/src/components/AttachmentPicker/index.tsx +++ b/src/components/AttachmentPicker/index.tsx @@ -46,6 +46,7 @@ function AttachmentPicker({children, type = CONST.ATTACHMENT_PICKER_TYPE.FILE}: // Cleanup after selecting a file to start from a fresh state if (fileInput.current) { + // eslint-disable-next-line react-compiler/react-compiler fileInput.current.value = ''; } }} diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx index f16ba2c53ae8..c32919ecff6e 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx @@ -66,6 +66,7 @@ function AttachmentCarouselPager( const pageScrollHandler = usePageScrollHandler((e) => { 'worklet'; + // eslint-disable-next-line react-compiler/react-compiler activePage.value = e.position; isPagerScrolling.value = e.offset !== 0; }, []); diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx index 243fc52f1f5d..e0f7571af8c7 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.tsx +++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx @@ -57,7 +57,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate(targetAttachments[initialPage]); } } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [reportActions, compareImage]); /** Updates the page state when the user navigates between attachments */ diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx index 36abe1e2e5ed..f7ef2c6529ce 100644 --- a/src/components/Attachments/AttachmentCarousel/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/index.tsx @@ -115,7 +115,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source, scrollRef.current.scrollToIndex({index: page, animated: false}); // The hook is not supposed to run on page change, so we keep the page out of the dependencies - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [cellWidth]); /** Updates the page state when the user navigates between attachments */ diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts index a7ce0f93114b..ed195fd943f1 100644 --- a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts +++ b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts @@ -45,7 +45,7 @@ function useCarouselArrows() { useEffect(() => { autoHideArrows(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows}; diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts index d516879322ea..cc2c3c5c8229 100644 --- a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts +++ b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts @@ -39,6 +39,7 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction translateY && translateX > SCROLL_THRESHOLD && scale.value === 1 && allowEnablingScroll) { + // eslint-disable-next-line react-compiler/react-compiler isScrollEnabled.value = true; } else if (translateY > SCROLL_THRESHOLD) { isScrollEnabled.value = false; diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 70d70a8c1844..2d22a2560bb0 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -56,6 +56,7 @@ function BaseAutoCompleteSuggestions({ useEffect(() => { if (measuredHeightOfSuggestionRows === prevRowHeightRef.current) { + // eslint-disable-next-line react-compiler/react-compiler fadeInOpacity.value = withTiming(1, { duration: 70, easing: Easing.inOut(Easing.ease), diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index 66814a44cf95..1a606b35f6d2 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.tsx @@ -123,6 +123,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose ImageSize.getSize(imageUri).then(({width, height, rotation: orginalRotation}) => { // On Android devices ImageSize library returns also rotation parameter. if (orginalRotation === 90 || orginalRotation === 270) { + // eslint-disable-next-line react-compiler/react-compiler originalImageHeight.value = width; originalImageWidth.value = height; } else { diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 88ae8d48a871..4b3f0f70db24 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -147,7 +147,7 @@ function KeyboardShortcutComponent({isDisabled = false, isLoading = false, onPre priority: enterKeyEventListenerPriority, shouldPreventDefault: false, }), - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [shouldDisableEnterShortcut, isFocused], ); diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 9e66c0b20c99..c5f2e07eef80 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -50,6 +50,7 @@ function Composer( * @param {Element} el */ const setTextInputRef = useCallback((el: AnimatedMarkdownTextInputRef) => { + // eslint-disable-next-line react-compiler/react-compiler textInput.current = el; if (typeof ref !== 'function' || textInput.current === null) { return; @@ -60,7 +61,7 @@ function Composer( // this.textInput = el} /> this will not // return a ref to the component, but rather the HTML element by default ref(textInput.current); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { @@ -93,6 +94,7 @@ function Composer( readOnly={isDisabled} onBlur={(e) => { if (!isFocused) { + // eslint-disable-next-line react-compiler/react-compiler shouldResetFocus.current = true; // detect the input is blurred when the page is hidden } props?.onBlur?.(e); diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index eb7091cd958c..a41f983434d8 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -277,8 +277,9 @@ function Composer( if (!textInput.current || prevScroll === undefined) { return; } + // eslint-disable-next-line react-compiler/react-compiler textInput.current.scrollTop = prevScroll; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isComposerFullSize]); useHtmlPaste(textInput, handlePaste, true); @@ -295,7 +296,7 @@ function Composer( } ReportActionComposeFocusManager.clear(); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const handleKeyPress = useCallback( diff --git a/src/components/CountrySelector.tsx b/src/components/CountrySelector.tsx index d4737701fcf4..9ff04874c6da 100644 --- a/src/components/CountrySelector.tsx +++ b/src/components/CountrySelector.tsx @@ -62,7 +62,7 @@ function CountrySelector({errorText = '', value: countryCode, onInputChange = () // This helps prevent issues where the component might not update correctly if the country is controlled by both the parent and the URL. Navigation.setParams({country: undefined}); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [countryFromUrl, isFocused, onBlur]); return ( diff --git a/src/components/CurrencySelector.tsx b/src/components/CurrencySelector.tsx index 6c69f7b31dc1..173df982c749 100644 --- a/src/components/CurrencySelector.tsx +++ b/src/components/CurrencySelector.tsx @@ -53,7 +53,7 @@ function CurrencySelector( useEffect(() => { // This will cause the form to revalidate and remove any error related to currency onInputChange(currency); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [currency]); return ( diff --git a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx index 430c00cf8804..b206d4bcf51d 100644 --- a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx +++ b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx @@ -64,7 +64,7 @@ function DisplayNamesTooltipItem({ if (!childRefs.current?.[index] || !el) { return; } - // eslint-disable-next-line no-param-reassign + // eslint-disable-next-line react-compiler/react-compiler, no-param-reassign childRefs.current[index] = el; }} style={[textStyles, styles.pre]} diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 2be8ea4aea7a..edf78283caf9 100644 --- a/src/components/EmojiPicker/EmojiPicker.tsx +++ b/src/components/EmojiPicker/EmojiPicker.tsx @@ -115,6 +115,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef { const emojiListRef = useAnimatedRef>(); const frequentlyUsedEmojis = useFrequentlyUsedEmojis(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps const allEmojis = useMemo(() => EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis), [frequentlyUsedEmojis]); const headerEmojis = useMemo(() => EmojiUtils.getHeaderEmojis(allEmojis), [allEmojis]); const headerRowIndices = useMemo(() => headerEmojis.map((headerEmoji) => headerEmoji.index), [headerEmojis]); diff --git a/src/components/EmojiPicker/EmojiSkinToneList.tsx b/src/components/EmojiPicker/EmojiSkinToneList.tsx index fb798f1c02c4..3a1832ac40a7 100644 --- a/src/components/EmojiPicker/EmojiSkinToneList.tsx +++ b/src/components/EmojiPicker/EmojiSkinToneList.tsx @@ -38,7 +38,7 @@ function EmojiSkinToneList() { return; } toggleIsSkinToneListVisible(); - // eslint-disable-next-line react-hooks/exhaustive-deps -- only run when preferredSkinTone updates + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- only run when preferredSkinTone updates }, [preferredSkinTone]); const currentSkinTone = getSkinToneEmojiFromIndex(preferredSkinTone); diff --git a/src/components/FlatList/index.android.tsx b/src/components/FlatList/index.android.tsx index 1246367d29e8..c8ce7ee10d6b 100644 --- a/src/components/FlatList/index.android.tsx +++ b/src/components/FlatList/index.android.tsx @@ -22,7 +22,7 @@ function CustomFlatList(props: FlatListProps, ref: ForwardedRef) } }, [scrollPosition?.offset, ref]); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent) => setScrollPosition({offset: event.nativeEvent.contentOffset.y}), []); useFocusEffect( diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx index 93ffa52bc80b..7c2f5579332a 100644 --- a/src/components/FloatingActionButton.tsx +++ b/src/components/FloatingActionButton.tsx @@ -63,6 +63,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo const buttonRef = ref; useEffect(() => { + // eslint-disable-next-line react-compiler/react-compiler sharedValue.value = withTiming(isActive ? 1 : 0, { duration: 340, easing: Easing.inOut(Easing.ease), diff --git a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx index d81293729b94..628a85c6d705 100644 --- a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx @@ -39,6 +39,7 @@ function FocusTrapForScreen({children}: FocusTrapProps) { useFocusEffect( useCallback(() => { + // eslint-disable-next-line react-compiler/react-compiler activeRouteName = route.name; }, [route]), ); diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 9df94e4c6114..a4b9df5916af 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -176,7 +176,7 @@ function FormProvider( onValidate(trimmedStringValues, !hasServerError); // Only run when locales change - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [preferredLocale]); /** @param inputID - The inputID of the input being touched */ @@ -239,6 +239,7 @@ function FormProvider( inputRefs.current[inputID] = newRef; } if (inputProps.value !== undefined) { + // eslint-disable-next-line react-compiler/react-compiler inputValues[inputID] = inputProps.value; } else if (inputProps.shouldSaveDraft && draftValues?.[inputID] !== undefined && inputValues[inputID] === undefined) { inputValues[inputID] = draftValues[inputID]; diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index f3cbc332c995..5fe1ba306400 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -58,7 +58,7 @@ function Image({source: propsSource, isAuthTokenRequired = false, session, onLoa } return propsSource; // The session prop is not required, as it causes the image to reload whenever the session changes. For more information, please refer to issue #26034. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [propsSource, isAuthTokenRequired]); /** diff --git a/src/components/LHNOptionsList/OptionRowLHNData.tsx b/src/components/LHNOptionsList/OptionRowLHNData.tsx index 8d61058ed5be..8f3d78546dd3 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.tsx +++ b/src/components/LHNOptionsList/OptionRowLHNData.tsx @@ -57,7 +57,7 @@ function OptionRowLHNData({ return item; // Listen parentReportAction to update title of thread report when parentReportAction changed // Listen to transaction to update title of transaction report when transaction changed - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [ fullReport, lastReportActionTransaction, diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index 956f3ffe5e02..2fae3cc89597 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -192,7 +192,7 @@ function MagicCodeInput( // We have not added: // + the editIndex as the dependency because we don't want to run this logic after focusing on an input to edit it after the user has completed the code. // + the onFulfill as the dependency because onFulfill is changed when the preferred locale changed => avoid auto submit form when preferred locale changed. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [value, shouldSubmitOnComplete]); /** @@ -353,7 +353,7 @@ function MagicCodeInput( // We have not added: // + the onChangeText and onKeyPress as the dependencies because we only want to run this when lastPressedDigit changes. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [lastPressedDigit, isDisableKeyboard]); return ( diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index 01d7134a96da..c8f4e9bb38fc 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -157,7 +157,7 @@ const MapView = forwardRef( resetBoundaries(); setShouldResetBoundaries(false); - // eslint-disable-next-line react-hooks/exhaustive-deps -- this effect only needs to run when the boundaries reset is forced + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- this effect only needs to run when the boundaries reset is forced }, [shouldResetBoundaries]); useEffect(() => { diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 2eb073bb39be..d88dde545f3b 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -118,7 +118,7 @@ function BaseModal( } hideModal(true); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); @@ -242,7 +242,9 @@ function BaseModal( deviceWidth={windowWidth} animationIn={animationIn ?? modalStyleAnimationIn} animationOut={animationOut ?? modalStyleAnimationOut} + // eslint-disable-next-line react-compiler/react-compiler useNativeDriver={useNativeDriverProp && useNativeDriver} + // eslint-disable-next-line react-compiler/react-compiler useNativeDriverForBackdrop={useNativeDriverForBackdrop && useNativeDriver} hideModalContentWhileAnimating={hideModalContentWhileAnimating} animationInTiming={animationInTiming} diff --git a/src/components/Modal/ModalContent.tsx b/src/components/Modal/ModalContent.tsx index 49d3b049220f..f71affe760ac 100644 --- a/src/components/Modal/ModalContent.tsx +++ b/src/components/Modal/ModalContent.tsx @@ -14,7 +14,7 @@ type ModalContentProps = { }; function ModalContent({children, onDismiss = () => {}}: ModalContentProps) { - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps React.useEffect(() => () => onDismiss?.(), []); return children; } diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index ef03a5d4d717..791b3e4d5e48 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -218,7 +218,7 @@ function MoneyRequestAmountInput( } // we want to re-initialize the state only when the amount changes - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [amount, shouldKeepUserInput]); // Modifies the amount to match the decimals for changed currency. @@ -232,7 +232,7 @@ function MoneyRequestAmountInput( setNewAmount(MoneyRequestUtils.stripDecimalsFromAmount(currentAmount)); // we want to update only when decimals change (setNewAmount also changes when decimals change). - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [setNewAmount]); /** @@ -295,6 +295,7 @@ function MoneyRequestAmountInput( // eslint-disable-next-line no-param-reassign forwardedRef.current = ref; } + // eslint-disable-next-line react-compiler/react-compiler textInput.current = ref; }} selectedCurrencyCode={currency} diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index cc7fde7f88d1..1fbd6a6b2630 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -300,7 +300,7 @@ function MoneyRequestConfirmationList({ // reset the form error whenever the screen gains or loses focus setFormError(''); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run if it's just setFormError that changes + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want this effect to run if it's just setFormError that changes }, [isFocused, transaction, shouldDisplayFieldError, hasSmartScanFailed, didConfirmSplit]); useEffect(() => { @@ -615,7 +615,7 @@ function MoneyRequestConfirmationList({ } IOU.setMoneyRequestCategory(transactionID, enabledCategories[0].name); // Keep 'transaction' out to ensure that we autoselect the option only once - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [shouldShowCategories, policyCategories, isCategoryRequired]); // Auto select the tag if there is only one enabled tag and it is required @@ -633,7 +633,7 @@ function MoneyRequestConfirmationList({ IOU.setMoneyRequestTag(transactionID, updatedTagsString); } // Keep 'transaction' out to ensure that we autoselect the option only once - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [policyTagLists, policyTags]); /** diff --git a/src/components/MultiGestureCanvas/index.tsx b/src/components/MultiGestureCanvas/index.tsx index 6b93e2e125e0..ff9566839d59 100644 --- a/src/components/MultiGestureCanvas/index.tsx +++ b/src/components/MultiGestureCanvas/index.tsx @@ -121,6 +121,7 @@ function MultiGestureCanvas({ const reset = useWorkletCallback((animated: boolean, callback?: () => void) => { stopAnimation(); + // eslint-disable-next-line react-compiler/react-compiler offsetX.value = 0; offsetY.value = 0; pinchScale.value = 1; diff --git a/src/components/MultiGestureCanvas/usePanGesture.ts b/src/components/MultiGestureCanvas/usePanGesture.ts index 636913fdf05d..fa27e48eea4c 100644 --- a/src/components/MultiGestureCanvas/usePanGesture.ts +++ b/src/components/MultiGestureCanvas/usePanGesture.ts @@ -116,6 +116,7 @@ const usePanGesture = ({ // If the (absolute) velocity is 0, we don't need to run an animation if (Math.abs(panVelocityX.value) !== 0) { // Phase out the pan animation + // eslint-disable-next-line react-compiler/react-compiler offsetX.value = withDecay({ velocity: panVelocityX.value, clamp: [horizontalBoundaries.min, horizontalBoundaries.max], diff --git a/src/components/MultiGestureCanvas/usePinchGesture.ts b/src/components/MultiGestureCanvas/usePinchGesture.ts index 87d3bdada6a2..46a5e28e5732 100644 --- a/src/components/MultiGestureCanvas/usePinchGesture.ts +++ b/src/components/MultiGestureCanvas/usePinchGesture.ts @@ -68,6 +68,7 @@ const usePinchGesture = ({ useAnimatedReaction( () => [pinchTranslateX.value, pinchTranslateY.value, pinchBounceTranslateX.value, pinchBounceTranslateY.value], ([translateX, translateY, bounceX, bounceY]) => { + // eslint-disable-next-line react-compiler/react-compiler totalPinchTranslateX.value = translateX + bounceX; totalPinchTranslateY.value = translateY + bounceY; }, diff --git a/src/components/MultiGestureCanvas/useTapGestures.ts b/src/components/MultiGestureCanvas/useTapGestures.ts index f550e93d6be2..e4bb02bd5d34 100644 --- a/src/components/MultiGestureCanvas/useTapGestures.ts +++ b/src/components/MultiGestureCanvas/useTapGestures.ts @@ -111,6 +111,7 @@ const useTapGestures = ({ offsetAfterZooming.y = 0; } + // eslint-disable-next-line react-compiler/react-compiler offsetX.value = withSpring(offsetAfterZooming.x, SPRING_CONFIG); offsetY.value = withSpring(offsetAfterZooming.y, SPRING_CONFIG); zoomScale.value = withSpring(doubleTapScale, SPRING_CONFIG, callback); diff --git a/src/components/Onfido/BaseOnfidoWeb.tsx b/src/components/Onfido/BaseOnfidoWeb.tsx index ebb29198bda7..703bb5a5b14e 100644 --- a/src/components/Onfido/BaseOnfidoWeb.tsx +++ b/src/components/Onfido/BaseOnfidoWeb.tsx @@ -140,7 +140,7 @@ function Onfido({sdkToken, onSuccess, onError, onUserExit}: OnfidoProps, ref: Fo window.addEventListener('userAnalyticsEvent', logOnFidoEvent); return () => window.removeEventListener('userAnalyticsEvent', logOnFidoEvent); // Onfido should be initialized only once on mount - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return ( diff --git a/src/components/Onfido/index.native.tsx b/src/components/Onfido/index.native.tsx index fd681e610f86..c6eb9c8868ee 100644 --- a/src/components/Onfido/index.native.tsx +++ b/src/components/Onfido/index.native.tsx @@ -88,7 +88,7 @@ function Onfido({sdkToken, onUserExit, onSuccess, onError}: OnfidoProps) { } }); // Onfido should be initialized only once on mount - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return ; diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index 41ab148bd7f2..d4a5c05167a0 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -36,6 +36,7 @@ function OpacityView({shouldDim, children, style = [], dimmingValue = variables. React.useEffect(() => { if (shouldDim) { + // eslint-disable-next-line react-compiler/react-compiler opacity.value = withTiming(dimmingValue, {duration: 50}); } else { opacity.value = withTiming(1, {duration: 50}); diff --git a/src/components/OptionListContextProvider.tsx b/src/components/OptionListContextProvider.tsx index 21f8bb3de097..f098188de270 100644 --- a/src/components/OptionListContextProvider.tsx +++ b/src/components/OptionListContextProvider.tsx @@ -73,7 +73,7 @@ function OptionsListContextProvider({reports, children}: OptionsListProviderProp return newOptions; }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [reports]); /** @@ -124,7 +124,7 @@ function OptionsListContextProvider({reports, children}: OptionsListProviderProp }); // This effect is used to update the options list when personal details change so we ignore all dependencies except personalDetails - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [personalDetails]); const loadOptions = useCallback(() => { diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index a64a676cb97a..2edf699affab 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -68,7 +68,7 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max useEffect(() => { retrieveCanvasLimits(); // This rule needs to be applied so that this effect is executed only when the component is mounted - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 1c337e024116..ddd6cd544f3e 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -61,7 +61,7 @@ function BasePicker( // so they don't have to spend extra time selecting the only possible value. onInputChange(items[0].value, 0); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [items]); const context = useScrollContext(); diff --git a/src/components/PlaidLink/index.native.tsx b/src/components/PlaidLink/index.native.tsx index 24ab75eb62b7..37b598303c3a 100644 --- a/src/components/PlaidLink/index.native.tsx +++ b/src/components/PlaidLink/index.native.tsx @@ -31,7 +31,7 @@ function PlaidLink({token, onSuccess = () => {}, onExit = () => {}, onEvent}: Pl }; // We generally do not need to include the token as a dependency here as it is only provided once via props and should not change - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return null; } diff --git a/src/components/PopoverWithoutOverlay/index.tsx b/src/components/PopoverWithoutOverlay/index.tsx index 06478b468e1e..bcead42a64f2 100644 --- a/src/components/PopoverWithoutOverlay/index.tsx +++ b/src/components/PopoverWithoutOverlay/index.tsx @@ -69,7 +69,7 @@ function PopoverWithoutOverlay( removeOnClose(); }; // We want this effect to run strictly ONLY when isVisible prop changes - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isVisible]); const { diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index d986af8f5cf3..4a145d4e79e9 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -121,7 +121,7 @@ function ReportPreview({ hasNonReimbursableTransactions: ReportUtils.hasNonReimbursableTransactions(iouReportID), }), // When transactions get updated these status may have changed, so that is a case where we also want to run this. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [transactions, iouReportID, action], ); diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 1d5d65d9874d..f845cfda3638 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -211,7 +211,7 @@ function ScreenWrapper( } }; // Rule disabled because this effect is only for component did mount & will component unmount lifecycle event - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const isAvoidingViewportScroll = useTackInputFocus(shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit()); diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 5454ffc61757..8445cb3bc72e 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -84,7 +84,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) { } SearchActions.search({hash, query, policyIDs, offset: 0, sortBy, sortOrder}); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [hash, isOffline]); const isLoadingItems = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined; diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index ae70e5525393..8b6ba790e6b0 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -222,7 +222,7 @@ function BaseSelectionList( return [processedSections, showMoreButton]; // we don't need to add styles here as they change // we don't need to add flattendedSections here as they will change along with sections - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [sections, currentPage]); // Disable `Enter` shortcut if the active element is a button or checkbox @@ -248,7 +248,7 @@ function BaseSelectionList( listRef.current.scrollToLocation({sectionIndex, itemIndex, animated, viewOffset: variables.contentHeaderHeight}); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [flattenedSections.allOptions], ); @@ -259,7 +259,7 @@ function BaseSelectionList( } setDisabledArrowKeyIndexes(flattenedSections.disabledArrowKeyOptionsIndexes); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [flattenedSections.disabledArrowKeyOptionsIndexes]); // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member @@ -278,7 +278,7 @@ function BaseSelectionList( onChangeText?.(''); }, [onChangeText]); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps const debouncedOnSelectRow = useCallback(lodashDebounce(onSelectRow, 200), [onSelectRow]); /** @@ -337,7 +337,7 @@ function BaseSelectionList( // This debounce happens on the trailing edge because on repeated enter presses, rapid component state update cancels the existing debounce and the redundant // enter presses runs the debounced function again. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps const debouncedSelectFocusedOption = useCallback(lodashDebounce(selectFocusedOption, 100), [selectFocusedOption]); /** diff --git a/src/components/SettlementButton.tsx b/src/components/SettlementButton.tsx index 7a7e4e584363..7c3c021a08eb 100644 --- a/src/components/SettlementButton.tsx +++ b/src/components/SettlementButton.tsx @@ -225,7 +225,7 @@ function SettlementButton({ } return buttonOptions; // We don't want to reorder the options when the preferred payment method changes while the button is still visible - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [currency, formattedAmount, iouReport, policyID, translate, shouldHidePaymentOptions, shouldShowApproveButton, shouldDisableApproveButton]); const selectPaymentType = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => { diff --git a/src/components/SpacerView.tsx b/src/components/SpacerView.tsx index 23c109f7d589..bb762da1226b 100644 --- a/src/components/SpacerView.tsx +++ b/src/components/SpacerView.tsx @@ -35,10 +35,11 @@ function SpacerView({shouldShow, style}: SpacerViewProps) { marginVertical: shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL, borderBottomWidth: shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH, }; + // eslint-disable-next-line react-compiler/react-compiler marginVertical.value = values.marginVertical; borderBottomWidth.value = values.borderBottomWidth; - // eslint-disable-next-line react-hooks/exhaustive-deps -- we only need to trigger when shouldShow prop is changed + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we only need to trigger when shouldShow prop is changed }, [shouldShow, prevShouldShow]); return ; diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx index e31f391f7376..7c579519c926 100644 --- a/src/components/SplashScreenHider/index.native.tsx +++ b/src/components/SplashScreenHider/index.native.tsx @@ -34,6 +34,7 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS hideHasBeenCalled.current = true; BootSplash.hide().then(() => { + // eslint-disable-next-line react-compiler/react-compiler scale.value = withTiming(0, { duration: 200, easing: Easing.back(2), diff --git a/src/components/StateSelector.tsx b/src/components/StateSelector.tsx index 9091472efba5..7e598a929ae3 100644 --- a/src/components/StateSelector.tsx +++ b/src/components/StateSelector.tsx @@ -71,7 +71,7 @@ function StateSelector( // This helps prevent issues where the component might not update correctly if the state is controlled by both the parent and the URL. Navigation.setParams({state: undefined}); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [stateFromUrl, onBlur, isFocused]); const title = stateCode && Object.keys(COMMON_CONST.STATES).includes(stateCode) ? translate(`allStates.${stateCode}.stateName`) : ''; diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 8f685fb668e7..6fe5c473797e 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -108,7 +108,7 @@ function BaseTextInput( } input.current.focus(); // We only want this to run on mount - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const animateLabel = useCallback( diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 3a1032ff7a43..6da87872ee96 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -108,7 +108,7 @@ function BaseTextInput( } input.current.focus(); // We only want this to run on mount - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const animateLabel = useCallback( diff --git a/src/components/TextInput/TextInputLabel/index.tsx b/src/components/TextInput/TextInputLabel/index.tsx index e1083b88414b..3136a43e8669 100644 --- a/src/components/TextInput/TextInputLabel/index.tsx +++ b/src/components/TextInput/TextInputLabel/index.tsx @@ -16,7 +16,7 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale}: return; } labelRef.current.setAttribute('for', inputId); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return ( diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx index a9dda9e956cf..4070714c798e 100644 --- a/src/components/TextInput/index.tsx +++ b/src/components/TextInput/index.tsx @@ -40,7 +40,7 @@ function TextInput(props: BaseTextInputProps, ref: ForwardedRef {}}: Tim handleMinutesChange(insertAtPosition(minutes, trimmedKey, selectionMinute.start, selectionMinute.end)); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [minutes, hours, selectionMinute, selectionHour], ); @@ -381,7 +381,7 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim focusHourInputOnLastCharacter(); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [selectionHour, selectionMinute], ); const arrowRightCallback = useCallback( @@ -394,7 +394,7 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim focusMinuteInputOnFirstCharacter(); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [selectionHour, selectionMinute], ); @@ -409,7 +409,7 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim e.preventDefault(); focusHourInputOnLastCharacter(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [selectionMinute.start, selectionMinute.end, focusHourInputOnLastCharacter], ); @@ -430,7 +430,7 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim useEffect(() => { onInputChange(`${hours}:${minutes} ${amPmValue}`); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [hours, minutes, amPmValue]); const handleSubmit = () => { @@ -463,6 +463,7 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim // eslint-disable-next-line no-param-reassign ref.current = {hourRef: textInputRef as TextInput | null, minuteRef: minuteInputRef.current}; } + // eslint-disable-next-line react-compiler/react-compiler hourInputRef.current = textInputRef as TextInput | null; }} onSelectionChange={(e) => { diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index 1398d74bbd67..50a1c9024293 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -41,6 +41,7 @@ function BaseEducationalTooltip({children, ...props}: TooltipProps) { {...props} > {({showTooltip, hideTooltip, updateTargetBounds}) => { + // eslint-disable-next-line react-compiler/react-compiler hideTooltipRef.current = hideTooltip; return React.cloneElement(children as React.ReactElement, { onLayout: (e: LayoutEvent) => { diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 8230f9132d00..c6a244be3fcb 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -124,6 +124,7 @@ function BaseVideoPlayer({ if (videoResumeTryNumber.current === 1) { playVideo(); } + // eslint-disable-next-line react-compiler/react-compiler videoResumeTryNumber.current -= 1; }, [playVideo, videoResumeTryNumber], @@ -160,7 +161,7 @@ function BaseVideoPlayer({ videoStateRef.current = status; onPlaybackStatusUpdate?.(status); }, - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to trigger this when isPlaying changes because isPlaying is only used inside shouldReplayVideo + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to trigger this when isPlaying changes because isPlaying is only used inside shouldReplayVideo [onPlaybackStatusUpdate, preventPausingWhenExitingFullscreen, videoDuration], ); diff --git a/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx index c9cf2c25d7ad..5d1ea0d85d0b 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx @@ -30,6 +30,7 @@ function ProgressBar({duration, position, seekPosition}: ProgressBarProps) { const wasVideoPlayingOnCheck = useSharedValue(false); const onCheckVideoPlaying = (isPlaying: boolean) => { + // eslint-disable-next-line react-compiler/react-compiler wasVideoPlayingOnCheck.value = isPlaying; }; diff --git a/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx index 011391ed4c71..abe1748c18b9 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx @@ -45,6 +45,7 @@ function VolumeButton({style, small = false}: VolumeButtonProps) { const changeVolumeOnPan = useCallback( (event: GestureStateChangeEvent | GestureUpdateEvent) => { const val = NumberUtils.roundToTwoDecimalPlaces(1 - event.y / sliderHeight); + // eslint-disable-next-line react-compiler/react-compiler volume.value = NumberUtils.clamp(val, 0, 1); }, [sliderHeight, volume], diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/index.tsx index f5461159aa8e..04cb69a96f8b 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx @@ -72,6 +72,7 @@ function VideoPlayerControls({ }; const enterFullScreenMode = useCallback(() => { + // eslint-disable-next-line react-compiler/react-compiler isFullScreenRef.current = true; updateCurrentlyPlayingURL(url); videoPlayerRef.current?.presentFullscreenPlayer(); diff --git a/src/components/VideoPlayerContexts/VolumeContext.tsx b/src/components/VideoPlayerContexts/VolumeContext.tsx index d67b989e5887..f22b524848de 100644 --- a/src/components/VideoPlayerContexts/VolumeContext.tsx +++ b/src/components/VideoPlayerContexts/VolumeContext.tsx @@ -16,6 +16,7 @@ function VolumeContextProvider({children}: ChildrenProps) { return; } currentVideoPlayerRef.current.setStatusAsync({volume: newVolume, isMuted: newVolume === 0}); + // eslint-disable-next-line react-compiler/react-compiler volume.value = newVolume; }, [currentVideoPlayerRef, volume], diff --git a/src/components/withNavigationTransitionEnd.tsx b/src/components/withNavigationTransitionEnd.tsx index 417d8828c1e4..83f14a1d58ef 100644 --- a/src/components/withNavigationTransitionEnd.tsx +++ b/src/components/withNavigationTransitionEnd.tsx @@ -18,7 +18,7 @@ export default function (WrappedComponent: ComponentType { diff --git a/src/hooks/useHtmlPaste/index.ts b/src/hooks/useHtmlPaste/index.ts index 4705a170c3bd..9c1239ed598b 100644 --- a/src/hooks/useHtmlPaste/index.ts +++ b/src/hooks/useHtmlPaste/index.ts @@ -61,7 +61,7 @@ const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeLi // eslint-disable-next-line no-empty } catch (e) {} // We only need to set the callback once. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); /** @@ -131,7 +131,7 @@ const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeLi } handlePastePlainText(event); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [handlePastedHTML, handlePastePlainText, preHtmlPasteCallback], ); @@ -155,7 +155,7 @@ const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeLi } document.removeEventListener('paste', handlePaste); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); }; diff --git a/src/hooks/useKeyboardShortcut.ts b/src/hooks/useKeyboardShortcut.ts index 1c5bbc426ef2..90f43b4520d1 100644 --- a/src/hooks/useKeyboardShortcut.ts +++ b/src/hooks/useKeyboardShortcut.ts @@ -63,6 +63,6 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G return () => { unsubscribe(); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isActive, callback, captureOnInputs, excludedNodes, priority, shortcut.descriptionKey, shortcut.modifiers.join(), shortcut.shortcutKey, shouldBubble, shouldPreventDefault]); } diff --git a/src/hooks/useReportIDs.tsx b/src/hooks/useReportIDs.tsx index 6059af105a77..38622e17d2be 100644 --- a/src/hooks/useReportIDs.tsx +++ b/src/hooks/useReportIDs.tsx @@ -107,7 +107,7 @@ function ReportIDsContextProvider({ policyMemberAccountIDs, ), // we need reports draft in deps array for reloading of list when reportsDrafts will change - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [chatReports, betas, policies, priorityMode, allReportActions, transactionViolations, activeWorkspaceID, policyMemberAccountIDs, reportsDrafts], ); diff --git a/src/hooks/useSyncFocus/index.ts b/src/hooks/useSyncFocus/index.ts index f8b3349bc223..6211b9988a82 100644 --- a/src/hooks/useSyncFocus/index.ts +++ b/src/hooks/useSyncFocus/index.ts @@ -21,7 +21,7 @@ const useSyncFocus = (ref: RefObject, isFocused: boolean, shouldSyncFocus } ref.current?.focus(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [didScreenTransitionEnd, isFocused, ref]); }; diff --git a/src/hooks/useTabNavigatorFocus/index.ts b/src/hooks/useTabNavigatorFocus/index.ts index f160f4670b26..f85b630a0834 100644 --- a/src/hooks/useTabNavigatorFocus/index.ts +++ b/src/hooks/useTabNavigatorFocus/index.ts @@ -40,7 +40,7 @@ function useTabNavigatorFocus({tabIndex}: UseTabNavigatorFocusParams): boolean { // Retrieve the animation value from the tab navigator, which ranges from 0 to the total number of pages displayed. // Even a minimal scroll towards the camera page (e.g., a value of 0.001 at start) should activate the camera for immediate responsiveness. // STOP!!!!!!! This is not a pattern to be followed! We are conditionally rendering this hook becase when used in the edit flow we'll never be inside a tab navigator. - // eslint-disable-next-line react-hooks/rules-of-hooks + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/rules-of-hooks tabPositionAnimation = useTabAnimation(); } catch (error) { tabPositionAnimation = null; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index ba296522ccef..0e40fa4d4037 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -316,7 +316,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie }; // Rule disabled because this effect is only for component did mount & will component unmount lifecycle event - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const CentralPaneScreenOptions = { diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx index 772c51915d1d..f244342c28ae 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx @@ -58,7 +58,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps } Welcome.isOnboardingFlowCompleted({onNotCompleted: () => Navigation.navigate(ROUTES.ONBOARDING_ROOT)}); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isLoadingApp]); // Parent navigator of the bottom tab bar is the root navigator. diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx index 90a7a0df056f..8c531a918af8 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx @@ -54,7 +54,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps } Welcome.isOnboardingFlowCompleted({onNotCompleted: () => Navigation.navigate(ROUTES.ONBOARDING_ROOT)}); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isLoadingApp]); // Parent navigator of the bottom tab bar is the root navigator. diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx index f35c609402b0..7b928e4cf4df 100644 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx @@ -29,7 +29,7 @@ function CustomFullScreenNavigator(props: FullScreenNavigatorProps) { } // We need to separately reset state of this navigator to trigger getRehydratedState. navigation.reset(navigation.getState()); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isSmallScreenWidth]); return ( diff --git a/src/libs/Navigation/FreezeWrapper.tsx b/src/libs/Navigation/FreezeWrapper.tsx index 23513dd87431..fb5f769b19c1 100644 --- a/src/libs/Navigation/FreezeWrapper.tsx +++ b/src/libs/Navigation/FreezeWrapper.tsx @@ -20,7 +20,7 @@ function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) { useEffect(() => { const index = navigation.getState()?.routes.findIndex((route) => route.key === currentRoute.key) ?? 0; screenIndexRef.current = index; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index dd3a2890d0ec..db64aea7ffe8 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -93,7 +93,7 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N const {adaptedState} = getAdaptedStateFromPath(lastVisitedPath, linkingConfig.config); return adaptedState; }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); diff --git a/src/pages/AddressPage.tsx b/src/pages/AddressPage.tsx index 852c57595b70..a1daa938af4c 100644 --- a/src/pages/AddressPage.tsx +++ b/src/pages/AddressPage.tsx @@ -42,7 +42,7 @@ function AddressPage({title, address, updateAddress, isLoadingApp = true}: Addre setCurrentCountry(address.country); setCity(address.city); setZipcode(address.zip); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [address?.state, address?.country, address?.city, address?.zip]); const handleAddressChange = useCallback((value: unknown, key: unknown) => { diff --git a/src/pages/InviteReportParticipantsPage.tsx b/src/pages/InviteReportParticipantsPage.tsx index 91fdd903ec3a..a4d5c5518ba2 100644 --- a/src/pages/InviteReportParticipantsPage.tsx +++ b/src/pages/InviteReportParticipantsPage.tsx @@ -76,7 +76,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen setInvitePersonalDetails(inviteOptions.personalDetails); setRecentReports(inviteOptions.recentReports); setSelectedOptions(newSelectedOptions); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change }, [personalDetails, betas, searchTerm, excludedUsers, options]); const sections = useMemo(() => { diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.tsx b/src/pages/LogInWithShortLivedAuthTokenPage.tsx index 47843aa434fa..8a0d71ec8d8c 100644 --- a/src/pages/LogInWithShortLivedAuthTokenPage.tsx +++ b/src/pages/LogInWithShortLivedAuthTokenPage.tsx @@ -71,7 +71,7 @@ function LogInWithShortLivedAuthTokenPage({route, account}: LogInWithShortLivedA }); } // The only dependencies of the effect are based on props.route - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [route]); if (account?.isLoading) { diff --git a/src/pages/LogOutPreviousUserPage.tsx b/src/pages/LogOutPreviousUserPage.tsx index d46b13459c46..622a7db6e086 100644 --- a/src/pages/LogOutPreviousUserPage.tsx +++ b/src/pages/LogOutPreviousUserPage.tsx @@ -67,7 +67,7 @@ function LogOutPreviousUserPage({session, route, isAccountLoading}: LogOutPrevio SessionActions.signInWithShortLivedAuthToken(email, shortLivedAuthToken); } // We only want to run this effect once on mount (when the page first loads after transitioning from OldDot) - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [initialURL]); useEffect(() => { @@ -86,7 +86,7 @@ function LogOutPreviousUserPage({session, route, isAccountLoading}: LogOutPrevio navigateToExitUrl(exitUrl); }); } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [initialURL, isAccountLoading]); return ; diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx index 17e5708803cd..f72850c8f7bd 100644 --- a/src/pages/NewChatConfirmPage.tsx +++ b/src/pages/NewChatConfirmPage.tsx @@ -129,7 +129,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP FileUtils.readFileAsync(stashedLocalAvatarImage, newGroupDraft?.avatarFileName ?? '', onSuccess, onFailure, newGroupDraft?.avatarFileType ?? ''); // we only need to run this when the component re-mounted - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return ( diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 3645a0dcf52d..9bbe9f5adbc4 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -245,7 +245,7 @@ function ReimbursementAccountPage({ BankAccounts.setPlaidEvent(null); } fetchData(false, isStepToOpenEmpty); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); // The empty dependency array ensures this runs only once after the component mounts. useEffect(() => { @@ -311,7 +311,7 @@ function ReimbursementAccountPage({ Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo)); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton], ); diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index aedeb9215e03..530df5fa0532 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -136,7 +136,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report), [report]); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report); - // eslint-disable-next-line react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx const chatRoomSubtitle = useMemo(() => ReportUtils.getChatRoomSubtitle(report), [report, policy]); const isSystemChat = useMemo(() => ReportUtils.isSystemChat(report), [report]); const isGroupChat = useMemo(() => ReportUtils.isGroupChat(report), [report]); diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 8a807655ae57..39021321a713 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -62,7 +62,7 @@ function RoomInvitePage({ useEffect(() => { setSearchTerm(SearchInputManager.searchInput); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); // Any existing participants and Expensify emails should not be eligible for invitation @@ -94,7 +94,7 @@ function RoomInvitePage({ setUserToInvite(inviteOptions.userToInvite); setInvitePersonalDetails(inviteOptions.personalDetails); setSelectedOptions(newSelectedOptions); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change }, [betas, debouncedSearchTerm, excludedUsers, options.personalDetails]); const sections = useMemo(() => { diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index e564f139950b..514e1f462e6b 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -84,7 +84,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { useEffect(() => { getRoomMembers(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); /** diff --git a/src/pages/TransactionReceiptPage.tsx b/src/pages/TransactionReceiptPage.tsx index 3d93851355c9..6129deb438de 100644 --- a/src/pages/TransactionReceiptPage.tsx +++ b/src/pages/TransactionReceiptPage.tsx @@ -43,7 +43,7 @@ function TransactionReceipt({transaction, report, reportMetadata = {isLoadingIni } ReportActions.openReport(route.params.reportID); // I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const moneyRequestReportID = ReportUtils.isMoneyRequestReport(report) ? report?.reportID : report?.parentReportID; diff --git a/src/pages/UnlinkLoginPage.tsx b/src/pages/UnlinkLoginPage.tsx index 326d09df3143..9869e4a70e68 100644 --- a/src/pages/UnlinkLoginPage.tsx +++ b/src/pages/UnlinkLoginPage.tsx @@ -26,7 +26,7 @@ function UnlinkLoginPage({route, account}: UnlinkLoginPageProps) { useEffect(() => { Session.unlinkLogin(Number(accountID), validateCode); // We only want this to run on mount - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/ValidateLoginPage/index.tsx b/src/pages/ValidateLoginPage/index.tsx index d7e975890186..faf12194ca62 100644 --- a/src/pages/ValidateLoginPage/index.tsx +++ b/src/pages/ValidateLoginPage/index.tsx @@ -28,7 +28,7 @@ function ValidateLoginPage({ Session.signInWithValidateCodeAndNavigate(Number(accountID), validateCode, '', exitTo); } }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/ValidateLoginPage/index.website.tsx b/src/pages/ValidateLoginPage/index.website.tsx index bcfbc25aff42..13f636867852 100644 --- a/src/pages/ValidateLoginPage/index.website.tsx +++ b/src/pages/ValidateLoginPage/index.website.tsx @@ -51,7 +51,7 @@ function ValidateLoginPage({ // we need to `popToTop` the stack after `signInWithValidateCode` in order to // perform login for both 2FA and non-2FA accounts. desktopLoginRedirect(autoAuthState, isSignedIn); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 539b46aa5b06..d15378431d72 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -527,7 +527,7 @@ function ReportScreen({ }; // I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { @@ -537,7 +537,7 @@ function ReportScreen({ } fetchReportIfNeeded(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isLoadingReportOnyx]); // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates @@ -549,7 +549,7 @@ function ReportScreen({ // We don't want to run this useEffect every time `report` is changed // Excluding shouldUseNarrowLayout from the dependency list to prevent re-triggering on screen resize events. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [prevIsFocused, report.notificationPreference, isFocused]); useEffect(() => { @@ -609,7 +609,7 @@ function ReportScreen({ fetchReportIfNeeded(); ComposerActions.setShouldShowComposeInput(true); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [ route, report, @@ -660,7 +660,7 @@ function ReportScreen({ } markReadyForHydration(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const actionListValue = useMemo((): ActionListContextType => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]); @@ -681,7 +681,7 @@ function ReportScreen({ fetchReportIfNeeded(); // This should only run once when the app is done loading - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [finishedLoadingApp]); const navigateToEndOfReport = useCallback(() => { diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index 3c440b59904b..f7e24ffcf790 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -35,6 +35,7 @@ function AnimatedEmptyStateBackground() { */ const {x, y} = animatedSensor.sensor.value; // The x vs y here seems wrong but is the way to make it feel right to the user + // eslint-disable-next-line react-compiler/react-compiler xOffset.value = clamp(xOffset.value + y * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_X, IMAGE_OFFSET_X); yOffset.value = clamp(yOffset.value - x * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y); return { diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index c744ad589306..f68406e8b7e6 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -682,7 +682,7 @@ function ComposerWithSuggestions( const prevIsFocused = usePrevious(isFocused); useEffect(() => { if (modal?.isVisible && !prevIsModalVisible) { - // eslint-disable-next-line no-param-reassign + // eslint-disable-next-line react-compiler/react-compiler, no-param-reassign isNextModalWillOpenRef.current = false; } @@ -708,7 +708,7 @@ function ComposerWithSuggestions( useEffect(() => { // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit updateMultilineInputRange(textInputRef.current, !!shouldAutoFocus); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useImperativeHandle( ref, @@ -744,12 +744,12 @@ function ComposerWithSuggestions( const onClear = useCallback(() => { mobileInputScrollPosition.current = 0; setTextInputShouldClear(false); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { tag.value = findNodeHandle(textInputRef.current) ?? -1; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useFocusedInputHandler( { diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 8dcb5e199ba1..bf82a28dd48a 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -197,7 +197,7 @@ function ReportActionCompose({ // If we are on a small width device then don't show last 3 items from conciergePlaceholderOptions const conciergePlaceholderRandomIndex = useMemo( () => Math.floor(Math.random() * (translate('reportActionCompose.conciergePlaceholderOptions').length - (isSmallScreenWidth ? 4 : 1) + 1)), - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); @@ -240,7 +240,7 @@ function ReportActionCompose({ containerRef.current.measureInWindow(callback); }, // We added isComposerFullSize in dependencies so that when this value changes, we recalculate the position of the popup - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [isComposerFullSize], ); @@ -341,7 +341,7 @@ function ReportActionCompose({ } EmojiPickerActions.hideEmojiPicker(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); diff --git a/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.android.tsx b/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.android.tsx index a3eafd3bf128..8df4ba4a0c26 100644 --- a/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.android.tsx +++ b/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.android.tsx @@ -16,7 +16,7 @@ import type {SilentCommentUpdaterOnyxProps, SilentCommentUpdaterProps} from './t function SilentCommentUpdater({comment, updateComment}: SilentCommentUpdaterProps) { useEffect(() => { updateComment(comment ?? ''); - // eslint-disable-next-line react-hooks/exhaustive-deps -- We need to run this on mount + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We need to run this on mount }, []); return null; diff --git a/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.tsx b/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.tsx index e1185e17722d..6cce050710c7 100644 --- a/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.tsx +++ b/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.tsx @@ -19,7 +19,7 @@ function SilentCommentUpdater({comment, commentRef, reportID, value, updateComme useEffect(() => { updateComment(comment ?? ''); - // eslint-disable-next-line react-hooks/exhaustive-deps -- We need to run this on mount + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We need to run this on mount }, []); useEffect(() => { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 1f16d4331e44..9854ca9a4bd0 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -185,7 +185,7 @@ function ReportActionItemMessageEdit( // to prevent the main composer stays hidden until we swtich to another chat. setShouldShowComposeInputKeyboardAware(true); }, - // eslint-disable-next-line react-hooks/exhaustive-deps -- this cleanup needs to be called only on unmount + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- this cleanup needs to be called only on unmount [action.reportActionID], ); @@ -266,7 +266,7 @@ function ReportActionItemMessageEdit( useEffect(() => { updateDraft(draft); - // eslint-disable-next-line react-hooks/exhaustive-deps -- run this only when language is changed + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- run this only when language is changed }, [action.reportActionID, preferredLocale]); /** diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 720c2b174164..cc07c74e602e 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -94,7 +94,7 @@ function ReportActionItemParentAction({ unsubscribeReports.forEach((unsubscribeReport) => unsubscribeReport()); unsubscribeReportActions.forEach((unsubscribeReportAction) => unsubscribeReportAction()); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return ( diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 9945eeb7fb4f..1ea58028c69f 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -228,6 +228,7 @@ function ReportActionsList({ })); useEffect(() => { + // eslint-disable-next-line react-compiler/react-compiler opacity.value = withTiming(1, {duration: 100}); }, [opacity]); @@ -280,7 +281,7 @@ function ReportActionsList({ cacheUnreadMarkers.delete(report.reportID); lastVisibleActionCreatedRef.current = report.lastVisibleActionCreated; setCurrentUnreadMarker(null); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [report.lastVisibleActionCreated, report.reportID]); useEffect(() => { @@ -293,7 +294,7 @@ function ReportActionsList({ lastReadTimeRef.current = report.lastReadTime; setMessageManuallyMarkedUnread(0); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [report.lastReadTime, report.reportID]); useEffect(() => { @@ -335,7 +336,7 @@ function ReportActionsList({ InteractionManager.runAfterInteractions(() => { reportScrollManager.scrollToBottom(); }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const scrollToBottomForCurrentUserAction = useCallback( @@ -377,7 +378,7 @@ function ReportActionsList({ return cleanup; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [report.reportID]); /** @@ -549,7 +550,7 @@ function ReportActionsList({ // is changed to visible(meaning user switched to app/web, while user was previously using different tab or application). // We will mark the report as read in the above case which marks the LHN report item as read while showing the new message // marker for the chat messages received while the user wasn't focused on the report or on another browser tab for web. - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isFocused, isVisible]); const renderItem = useCallback( diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index 220ab1aa1af1..6cab01cfc3a3 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -150,9 +150,10 @@ function ReportActionsView({ } isFirstLinkedActionRender.current = true; const newID = generateNewRandomInt(listOldID, 1, Number.MAX_SAFE_INTEGER); + // eslint-disable-next-line react-compiler/react-compiler listOldID = newID; return newID; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [route, isLoadingInitialReportActions, reportActionID]); // When we are offline before opening an IOU/Expense report, @@ -254,7 +255,7 @@ function ReportActionsView({ return combinedReportActions.slice(Math.max(indexOfLinkedAction - paginationSize, 0)); // currentReportActionID is needed to trigger batching once the report action has been positioned - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [reportActionID, combinedReportActions, indexOfLinkedAction, isLoading, currentReportActionID]); const reportActionIDMap = useMemo(() => { @@ -323,7 +324,7 @@ function ReportActionsView({ // 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 Report.openReport(reportID, reportActionID); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [route, indexOfLinkedAction]); useEffect(() => { @@ -331,7 +332,7 @@ function ReportActionsView({ if (wasLoginChangedDetected && didUserLogInDuringSession() && isUserCreatedPolicyRoom(report)) { openReportIfNecessary(); } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [session, report]); useEffect(() => { @@ -345,7 +346,7 @@ function ReportActionsView({ } // update ref with current state prevIsSmallScreenWidthRef.current = isSmallScreenWidth; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isSmallScreenWidth, reportActions, isReportFullyVisible]); const onContentSizeChange = useCallback((w: number, h: number) => { diff --git a/src/pages/home/report/ReportFooter.tsx b/src/pages/home/report/ReportFooter.tsx index 3e8b7643bdef..c12a04b4059a 100644 --- a/src/pages/home/report/ReportFooter.tsx +++ b/src/pages/home/report/ReportFooter.tsx @@ -161,7 +161,7 @@ function ReportFooter({ } Report.addComment(report.reportID, text); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [report.reportID, handleCreateTask], ); diff --git a/src/pages/home/report/UserTypingEventListener.tsx b/src/pages/home/report/UserTypingEventListener.tsx index b886b7714d16..57eb51df137d 100644 --- a/src/pages/home/report/UserTypingEventListener.tsx +++ b/src/pages/home/report/UserTypingEventListener.tsx @@ -37,7 +37,7 @@ function UserTypingEventListener({report, lastVisitedPath}: UserTypingEventListe Report.unsubscribeFromReportChannel(reportID); }); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index 468e4264bb3c..126c24ac8a31 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -49,7 +49,7 @@ export default function (pageTitle: TranslationPaths) { } Report.getReportPrivateNote(report.reportID); - // eslint-disable-next-line react-hooks/exhaustive-deps -- do not add report.isLoadingPrivateNotes to dependencies + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- do not add report.isLoadingPrivateNotes to dependencies }, [report.reportID, isOffline, isPrivateNotesFetchTriggered, isReconnecting]); const shouldShowFullScreenLoadingIndicator = !isPrivateNotesFetchFinished; diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 9ffb8c227e7e..a9ad8851dcf1 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -71,7 +71,7 @@ export default function StyleSheet.flatten([styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]), [insets]); return ( diff --git a/src/pages/home/sidebar/SidebarLinksData.tsx b/src/pages/home/sidebar/SidebarLinksData.tsx index 471e0d0bf20e..b6d123207440 100644 --- a/src/pages/home/sidebar/SidebarLinksData.tsx +++ b/src/pages/home/sidebar/SidebarLinksData.tsx @@ -39,7 +39,7 @@ function SidebarLinksData({insets, isLoadingApp = true, onLinkClick, priorityMod const {orderedReportIDs, currentReportID, policyMemberAccountIDs} = useReportIDs(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps useEffect(() => Policy.openWorkspace(activeWorkspaceID ?? '-1', policyMemberAccountIDs), [activeWorkspaceID]); const isLoading = isLoadingApp; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index a870948b959a..03f8c4e280a2 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -192,7 +192,7 @@ function FloatingActionButtonAndPopover( } return []; // Policy is needed as a dependency in order to update the shortcut details when the workspace changes - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [personalDetails, session?.accountID, quickActionReport, quickActionPolicy]); const renderQuickActionTooltip = useCallback( @@ -304,7 +304,7 @@ function FloatingActionButtonAndPopover( setIsCreateMenuActive(true); onShowCreateMenu?.(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [isFocused, isSmallScreenWidth], ); @@ -321,7 +321,7 @@ function FloatingActionButtonAndPopover( setIsCreateMenuActive(false); onHideCreateMenu?.(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [isCreateMenuActive], ); @@ -347,7 +347,7 @@ function FloatingActionButtonAndPopover( showCreateMenu(); } }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps const selfDMReportID = useMemo(() => ReportUtils.findSelfDMReportID(), [isLoading]); return ( diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index 4db7a13171cb..f03b4638c83f 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -166,7 +166,7 @@ function MoneyRequestAmountForm( } initializeAmount(amount); // we want to re-initialize the state only when the selected tab - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [selectedTab]); /** diff --git a/src/pages/iou/request/IOURequestRedirectToStartPage.tsx b/src/pages/iou/request/IOURequestRedirectToStartPage.tsx index 033b3b3e2edd..1316b3afc928 100644 --- a/src/pages/iou/request/IOURequestRedirectToStartPage.tsx +++ b/src/pages/iou/request/IOURequestRedirectToStartPage.tsx @@ -37,7 +37,7 @@ function IOURequestRedirectToStartPage({ } // This useEffect should only run on mount which is why there are no dependencies being passed in the second parameter - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); if (!isIouTypeValid || !isIouRequestTypeValid) { diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 2ead96854e3a..8d07f13f8c46 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -249,7 +249,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF onParticipantsAdded(newParticipants); onFinish(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to trigger this callback when iouType changes + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to trigger this callback when iouType changes [onFinish, onParticipantsAdded], ); @@ -292,7 +292,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF onParticipantsAdded(newSelectedOptions); }, - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to trigger this callback when iouType changes + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to trigger this callback when iouType changes [participants, onParticipantsAdded], ); diff --git a/src/pages/iou/request/step/IOURequestStepAmount.tsx b/src/pages/iou/request/step/IOURequestStepAmount.tsx index a64af40a32a5..ae38d4b278e4 100644 --- a/src/pages/iou/request/step/IOURequestStepAmount.tsx +++ b/src/pages/iou/request/step/IOURequestStepAmount.tsx @@ -124,7 +124,7 @@ function IOURequestStepAmount({ } TransactionEdit.removeDraftTransaction(transaction?.transactionID ?? '-1'); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const navigateBack = () => { diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx index 601fb4dc29da..a2f7d96c6043 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.tsx +++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx @@ -115,7 +115,7 @@ function IOURequestStepCategory({ useEffect(() => { fetchData(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const navigateBack = () => { diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 666a0ab08af1..671cc6d06706 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -180,7 +180,7 @@ function IOURequestStepConfirmation({ } IOU.setMoneyRequestCategory(transactionID, defaultCategory); // Prevent resetting to default when unselect category - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [transactionID, requestType, defaultCategory]); const navigateBack = useCallback(() => { diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index 11d5687a55e9..05b228c73c76 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -168,7 +168,7 @@ function IOURequestStepDistance({ } TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', action === CONST.IOU.ACTION.CREATE); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const navigateBack = () => { diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index 056a03b3b8f5..9301387d5c51 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -124,6 +124,7 @@ function IOURequestStepScan({ .onStart((ev: {x: number; y: number}) => { const point = {x: ev.x, y: ev.y}; + // eslint-disable-next-line react-compiler/react-compiler focusIndicatorOpacity.value = withSequence(withTiming(0.8, {duration: 250}), withDelay(1000, withTiming(0, {duration: 250}))); focusIndicatorScale.value = 2; focusIndicatorScale.value = withSpring(1, {damping: 10, stiffness: 200}); diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 00e0e14ee27c..db03e539cdb5 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -150,7 +150,7 @@ function IOURequestStepScan({ setVideoConstraints(defaultConstraints); setCameraPermissionState('denied'); }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { @@ -174,7 +174,7 @@ function IOURequestStepScan({ setIsQueriedPermissionState(true); }); // We only want to get the camera permission status when the component is mounted - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isTabActive]); const hideRecieptModal = () => { diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index d2b0fc3a6d98..9539ee1e1596 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -68,7 +68,7 @@ export default function ), // disabling this rule, as we want this to run only on the first render - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx index cf6b58c3eaca..393b377869df 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx @@ -145,7 +145,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { return; } User.resetContactMethodValidateCodeSentState(contactMethod); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const prevValidatedDate = usePrevious(loginData?.validatedDate); diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx index eeb114912544..36357268abc8 100644 --- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx +++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx @@ -73,7 +73,7 @@ function NewContactMethodPage({loginList, route}: NewContactMethodPageProps) { // We don't need `loginList` because when submitting this form // the loginList gets updated, causing this function to run again. // https://github.com/Expensify/App/issues/20610 - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [translate], ); diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx index 313a5a066496..556d341d049f 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -118,7 +118,7 @@ function BaseValidateCodeForm({account = {}, contactMethod, hasMagicCodeBeenSent } User.clearContactMethodErrors(contactMethod, 'validateLogin'); // contactMethod is not added as a dependency since it does not change between renders - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx index 40fbf097cdd9..2d3538b8fbc5 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx @@ -72,7 +72,7 @@ const useValidateCustomDate = (data: string) => { return; } validate(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [data]); const validateCustomDate = () => validate(); @@ -149,7 +149,7 @@ function StatusClearAfterPage({customStatus}: StatusClearAfterPageProps) { clearAfter: draftClearAfter || clearAfter, }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const customStatusDate = DateUtils.extractDate(draftClearAfter); diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx index 13c7ad92ec49..6532bf28ac41 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx @@ -141,7 +141,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) } return () => User.clearDraftCustomStatus(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const validateForm = useCallback((): FormInputErrors => { diff --git a/src/pages/settings/Profile/PronounsPage.tsx b/src/pages/settings/Profile/PronounsPage.tsx index 69233cd51525..e78e748c2231 100644 --- a/src/pages/settings/Profile/PronounsPage.tsx +++ b/src/pages/settings/Profile/PronounsPage.tsx @@ -42,7 +42,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp = true}: Pronoun setSearchValue(currentPronounsText ? translate(`pronouns.${currentPronounsText}`) : ''); // Only need to update search value when the first time the data is loaded - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isLoadingApp]); const filteredPronounsList = useMemo((): PronounEntry[] => { diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx index 4d46f18c15ea..edda91d4a8ed 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx @@ -42,7 +42,7 @@ function CodesStep({account, backTo}: CodesStepProps) { return; } Session.toggleTwoFactorAuth(true); - // eslint-disable-next-line react-hooks/exhaustive-deps -- We want to run this when component mounts + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We want to run this when component mounts }, []); return ( diff --git a/src/pages/settings/Wallet/TransferBalancePage.tsx b/src/pages/settings/Wallet/TransferBalancePage.tsx index b3ebbde3ae71..a324c91ecb85 100644 --- a/src/pages/settings/Wallet/TransferBalancePage.tsx +++ b/src/pages/settings/Wallet/TransferBalancePage.tsx @@ -114,7 +114,7 @@ function TransferBalancePage({bankAccountList, fundList, userWallet, walletTrans } PaymentMethods.saveWalletTransferAccountTypeAndID(selectedAccount?.accountType ?? '', selectedAccount?.methodID?.toString() ?? '-1'); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want this effect to run on initial render + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we only want this effect to run on initial render }, []); if (walletTransfer?.shouldShowSuccess && !walletTransfer?.loading) { diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx index 49e7479c0435..f7c96004d7db 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx @@ -173,7 +173,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false input.current.focus(); } return () => clearTimeout(focusTimeout); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to call this function when component is mounted + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we just want to call this function when component is mounted }, []); useEffect(() => { diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx index b61136993488..3aab8a003bc9 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx @@ -19,6 +19,7 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac const animatedStyle = useAnimatedStyle(() => ({opacity: opacity.value})); // This sets the opacity animation for the background image once it has loaded. function setOpacityAnimation() { + // eslint-disable-next-line react-compiler/react-compiler opacity.value = withTiming(1, { duration: CONST.MICROSECONDS_PER_MS, easing: Easing.ease, diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx index 523c89874f9c..f0c575007103 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -217,7 +217,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs clearLocalSignInData(); // `clearLocalSignInData` is not required as a dependency, and adding it // overcomplicates things requiring clearLocalSignInData function to use useCallback - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isLoadingResendValidationForm]); useEffect(() => { diff --git a/src/pages/wallet/WalletStatementPage.tsx b/src/pages/wallet/WalletStatementPage.tsx index 40f69d809618..0db72877bd2e 100644 --- a/src/pages/wallet/WalletStatementPage.tsx +++ b/src/pages/wallet/WalletStatementPage.tsx @@ -42,7 +42,7 @@ function WalletStatementPage({walletStatement, route}: WalletStatementPageProps) if (!yearMonth || yearMonth.length !== 6 || yearMonth > currentYearMonth) { Navigation.dismissModal(); } - // eslint-disable-next-line react-hooks/exhaustive-deps -- we want this effect to run only on mount + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we want this effect to run only on mount }, []); useEffect(() => { diff --git a/src/pages/workspace/AccessOrNotFoundWrapper.tsx b/src/pages/workspace/AccessOrNotFoundWrapper.tsx index 02e5ab13fd86..c7f89559fdda 100644 --- a/src/pages/workspace/AccessOrNotFoundWrapper.tsx +++ b/src/pages/workspace/AccessOrNotFoundWrapper.tsx @@ -116,7 +116,7 @@ function AccessOrNotFoundWrapper({accessVariants = [], fullPageNotFoundViewProps } Policy.openWorkspace(policyID, []); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isPolicyIDInRoute, policyID]); const shouldShowFullScreenLoadingIndicator = !isMoneyRequest && isLoadingReportData !== false && (!Object.entries(policy ?? {}).length || !policy?.id); diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 7a500a85ee33..a3785ccde384 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -140,7 +140,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reimbursementAcc App.savePolicyDraftByNewWorkspace(policyDraft.id, policyDraft.name, '', policyDraft.makeMeAdmin); // We only care when the component renders the first time - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.tsx b/src/pages/workspace/WorkspaceInviteMessagePage.tsx index 753f2e4e9728..b0137a0f0eaf 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.tsx +++ b/src/pages/workspace/WorkspaceInviteMessagePage.tsx @@ -100,7 +100,7 @@ function WorkspaceInviteMessagePage({ return; } Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID), true); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const debouncedSaveDraft = lodashDebounce((newDraft: string | null) => { diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 1627f982c8e9..c29819b3c6f9 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -81,13 +81,13 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli return () => { Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [route.params.policyID]); useEffect(() => { Policy.clearErrors(route.params.policyID); openWorkspaceInvitePage(); - // eslint-disable-next-line react-hooks/exhaustive-deps -- policyID changes remount the component + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- policyID changes remount the component }, []); useNetwork({onReconnect: openWorkspaceInvitePage}); @@ -171,7 +171,7 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli setPersonalDetails(Object.values(newPersonalDetailsDict)); setSelectedOptions(Object.values(newSelectedOptionsDict)); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change }, [options.personalDetails, policy?.employeeList, betas, debouncedSearchTerm, excludedUsers, areOptionsInitialized, inviteOptions.personalDetails, inviteOptions.userToInvite]); const sections: MembersSection[] = useMemo(() => { diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 01e40a2e3326..936c43b56ee5 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -136,7 +136,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft, newErrors[member] = translate('workspace.people.error.cannotRemove'); }); setErrors(newErrors); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [selectedEmployees, policy?.owner, session?.accountID]); // useFocus would make getWorkspaceMembers get called twice on fresh login because policyEmployee is a dependency of getWorkspaceMembers. @@ -146,7 +146,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft, return; } getWorkspaceMembers(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isFocused]); useEffect(() => { @@ -174,7 +174,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft, // This is an equivalent of the lodash intersection function. The reduce method below is used to filter the items that exist in both arrays. return [prevSelectedElements, currentSelectedElements].reduce((prev, members) => prev.filter((item) => members.includes(item))); }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [policy?.employeeList, policyMemberEmailsToAccountIDs]); useEffect(() => { diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx index 2fa291831de1..3f53f9e1cf6d 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.tsx +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -148,7 +148,7 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli return; } Navigation.dismissModal(newRoomReportID); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want this to update on changing the form State + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we just want this to update on changing the form State }, [isLoading, errorFields]); useEffect(() => { diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 65b97b7c0387..d8f917eb4f20 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -152,7 +152,7 @@ function WorkspacePageWithSections({ (!isEmptyObject(policy) && !PolicyUtils.isPolicyAdmin(policy) && !shouldShowNonAdmin) || (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy)) ); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [policy, shouldShowNonAdmin]); return ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 5c6a5117c85d..46b073b2bd48 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -76,7 +76,7 @@ function WorkspaceExpensifyCardListPage({route}: WorkspaceExpensifyCardListPageP const fetchExpensifyCards = useCallback(() => { // TODO: uncomment when OpenPolicyExpensifyCardsPage API call is supported // Policy.openPolicyExpensifyCardsPage(policyID); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [policyID]); useFocusEffect(fetchExpensifyCards); diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx index 1db74b9e5dee..3e603667a6d8 100644 --- a/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx +++ b/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx @@ -53,7 +53,7 @@ function WorkspaceOwnerChangeCheck({personalDetails, policy, accountID, error}: useEffect(() => { updateDisplayTexts(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx b/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx index ad16587f6ab9..91e22fd9fcd5 100644 --- a/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx +++ b/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx @@ -50,7 +50,7 @@ function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormPr PaymentMethods.clearPaymentCardFormErrorAndSubmit(); }; }, - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/InitialPage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/InitialPage.tsx index 98e48490d300..7381d02cb01d 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/InitialPage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/InitialPage.tsx @@ -44,7 +44,7 @@ function WorkspaceRateAndUnitPage(props: WorkspaceRateAndUnitPageProps) { return; } Policy.setPolicyIDForReimburseView(props.policy?.id ?? '-1'); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx index f1c3d4268fbd..af11a83f13f8 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx @@ -38,7 +38,7 @@ function WorkspaceRatePage(props: WorkspaceRatePageProps) { return; } Policy.setPolicyIDForReimburseView(props.policy?.id ?? '-1'); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const submit = (values: FormOnyxValues) => { diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx index ceac20bb7e7b..981ad2c81f9b 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx @@ -33,7 +33,7 @@ function WorkspaceUnitPage(props: WorkspaceUnitPageProps) { return; } Policy.setPolicyIDForReimburseView(props.policy?.id ?? '-1'); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); const updateUnit = (unit: UnitItemType) => { diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx index faebbaece7ba..05d2eb0eb7be 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx @@ -141,7 +141,7 @@ function WorkspaceWorkflowsApproverPage({policy, personalDetails, isLoadingRepor const headerMessage = useMemo( () => (searchTerm && !sections[0].data.length ? translate('common.noResultsFound') : ''), - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [translate, sections], ); diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx index aac4302e7ae5..7eb829b178ad 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx @@ -139,7 +139,7 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR const headerMessage = useMemo( () => (searchTerm && !sections[0].data.length ? translate('common.noResultsFound') : ''), - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [translate, sections], );