[No QA] Fix Batch 1 of React Compiler warnings

package.json

@@ -43,7 +43,7 @@
     "test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
     "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
     "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
-    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=668 --cache --cache-location=node_modules/.cache/eslint --cache-strategy content --concurrency=auto",
+    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=378 --cache --cache-location=node_modules/.cache/eslint --cache-strategy content --concurrency=auto",
     "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
     "check-lazy-loading": "ts-node scripts/checkLazyLoading.ts",
     "lint-watch": "npx eslint-watch --watch --changed",

src/components/Form/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useRef} from 'react';
+import React, {useRef} from 'react';
 import type {RefObject} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView, StyleProp, ViewStyle} from 'react-native';
@@ -103,9 +103,9 @@ function FormWrapper({
 
     const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`, {canBeMissing: true});
 
-    const errorMessage = useMemo(() => (formState ? getLatestErrorMessage(formState) : undefined), [formState]);
+    const errorMessage = formState ? getLatestErrorMessage(formState) : undefined;
 
-    const onFixTheErrorsLinkPressed = useCallback(() => {
+    const onFixTheErrorsLinkPressed = () => {
         const errorFields = !isEmptyObject(errors) ? errors : (formState?.errorFields ?? {});
         const focusKey = Object.keys(inputRefs.current ?? {}).find((key) => key in errorFields);
 
@@ -134,7 +134,7 @@ function FormWrapper({
 
         // Focus the input after scrolling, as on the Web it gives a slightly better visual result
         focusInput?.focus?.();
-    }, [errors, formState?.errorFields, inputRefs]);
+    };
 
     // If either of `addBottomSafeAreaPadding` or `shouldSubmitButtonStickToBottom` is explicitly set,
     // we expect that the user wants to use the new edge-to-edge mode.
@@ -159,88 +159,53 @@ function FormWrapper({
         style: submitButtonStyles,
     });
 
-    const SubmitButton = useMemo(
-        () =>
-            isSubmitButtonVisible && (
-                <FormAlertWithSubmitButton
-                    buttonText={submitButtonText}
-                    isDisabled={isSubmitDisabled}
-                    isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
-                    isLoading={!!formState?.isLoading || isLoading}
-                    message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
-                    onSubmit={onSubmit}
-                    footerContent={footerContent}
-                    onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
-                    containerStyles={[
-                        styles.mh0,
-                        styles.mt5,
-                        submitFlexEnabled && styles.flex1,
-                        submitButtonStylesWithBottomSafeAreaPadding,
-                        shouldSubmitButtonStickToBottom && [styles.stickToBottom, style],
-                    ]}
-                    enabledWhenOffline={enabledWhenOffline}
-                    isSubmitActionDangerous={isSubmitActionDangerous}
-                    disablePressOnEnter={disablePressOnEnter}
-                    enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                    shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
-                    shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
-                    shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPressSubmit}
-                />
-            ),
-        [
-            disablePressOnEnter,
-            enterKeyEventListenerPriority,
-            enabledWhenOffline,
-            errorMessage,
-            errors,
-            footerContent,
-            formState?.errorFields,
-            formState?.isLoading,
-            isLoading,
-            isSubmitActionDangerous,
-            isSubmitButtonVisible,
-            isSubmitDisabled,
-            onFixTheErrorsLinkPressed,
-            onSubmit,
-            shouldHideFixErrorsAlert,
-            shouldSubmitButtonBlendOpacity,
-            shouldSubmitButtonStickToBottom,
-            style,
-            styles.flex1,
-            styles.mh0,
-            styles.mt5,
-            styles.stickToBottom,
-            submitButtonStylesWithBottomSafeAreaPadding,
-            submitButtonText,
-            submitFlexEnabled,
-            shouldRenderFooterAboveSubmit,
-            shouldPreventDefaultFocusOnPressSubmit,
-        ],
+    const SubmitButton = isSubmitButtonVisible && (
+        <FormAlertWithSubmitButton
+            buttonText={submitButtonText}
+            isDisabled={isSubmitDisabled}
+            isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
+            isLoading={!!formState?.isLoading || isLoading}
+            message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
+            onSubmit={onSubmit}
+            footerContent={footerContent}
+            onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
+            containerStyles={[
+                styles.mh0,
+                styles.mt5,
+                submitFlexEnabled && styles.flex1,
+                submitButtonStylesWithBottomSafeAreaPadding,
+                shouldSubmitButtonStickToBottom && [styles.stickToBottom, style],
+            ]}
+            enabledWhenOffline={enabledWhenOffline}
+            isSubmitActionDangerous={isSubmitActionDangerous}
+            disablePressOnEnter={disablePressOnEnter}
+            enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+            shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
+            shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
+            shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPressSubmit}
+        />
     );
 
-    const scrollViewContent = useCallback(
-        () => (
-            <FormElement
-                key={formID}
-                ref={formContentRef}
-                style={[style, styles.pb5]}
-                onLayout={() => {
-                    if (!shouldScrollToEnd) {
-                        return;
-                    }
-                    // eslint-disable-next-line @typescript-eslint/no-deprecated
-                    InteractionManager.runAfterInteractions(() => {
-                        requestAnimationFrame(() => {
-                            formRef.current?.scrollToEnd({animated: true});
-                        });
+    const scrollViewContent = () => (
+        <FormElement
+            key={formID}
+            ref={formContentRef}
+            style={[style, styles.pb5]}
+            onLayout={() => {
+                if (!shouldScrollToEnd) {
+                    return;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                InteractionManager.runAfterInteractions(() => {
+                    requestAnimationFrame(() => {
+                        formRef.current?.scrollToEnd({animated: true});
                     });
-                }}
-            >
-                {children}
-                {!shouldSubmitButtonStickToBottom && SubmitButton}
-            </FormElement>
-        ),
-        [formID, style, styles.pb5, children, shouldSubmitButtonStickToBottom, SubmitButton, shouldScrollToEnd],
+                });
+            }}
+        >
+            {children}
+            {!shouldSubmitButtonStickToBottom && SubmitButton}
+        </FormElement>
     );
 
     if (!shouldUseScrollView) {

src/components/InvertedFlatList/index.e2e.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import type {ScrollViewProps, ViewToken} from 'react-native';
 import {DeviceEventEmitter, FlatList} from 'react-native';
 import type {ReportAction} from '@src/types/onyx';
@@ -9,33 +9,25 @@ const AUTOSCROLL_TO_TOP_THRESHOLD = 128;
 function InvertedFlatListE2E({ref, ...props}: InvertedFlatListProps<ReportAction>) {
     const {shouldEnableAutoScrollToTopThreshold, ...rest} = props;
 
-    const handleViewableItemsChanged = useMemo(
-        () =>
-            ({viewableItems}: {viewableItems: ViewToken[]}) => {
-                DeviceEventEmitter.emit('onViewableItemsChanged', viewableItems);
-            },
-        [],
-    );
-
-    const maintainVisibleContentPosition = useMemo(() => {
-        const config: ScrollViewProps['maintainVisibleContentPosition'] = {
-            // This needs to be 1 to avoid using loading views as anchors.
-            minIndexForVisible: rest.data?.length ? Math.min(1, rest.data.length - 1) : 0,
-        };
+    const handleViewableItemsChanged = ({viewableItems}: {viewableItems: ViewToken[]}) => {
+        DeviceEventEmitter.emit('onViewableItemsChanged', viewableItems);
+    };
 
-        if (shouldEnableAutoScrollToTopThreshold) {
-            config.autoscrollToTopThreshold = AUTOSCROLL_TO_TOP_THRESHOLD;
-        }
+    const config: ScrollViewProps['maintainVisibleContentPosition'] = {
+        // This needs to be 1 to avoid using loading views as anchors.
+        minIndexForVisible: rest.data?.length ? Math.min(1, rest.data.length - 1) : 0,
+    };
 
-        return config;
-    }, [shouldEnableAutoScrollToTopThreshold, rest.data?.length]);
+    if (shouldEnableAutoScrollToTopThreshold) {
+        config.autoscrollToTopThreshold = AUTOSCROLL_TO_TOP_THRESHOLD;
+    }
 
     return (
         <FlatList<ReportAction>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
             ref={ref}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            maintainVisibleContentPosition={config}
             inverted
             onViewableItemsChanged={handleViewableItemsChanged}
         />

src/components/Navigation/SearchSidebar.tsx

@@ -1,5 +1,5 @@
 import type {ParamListBase} from '@react-navigation/native';
-import React, {useEffect, useMemo} from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import {useSearchContext} from '@components/Search/SearchContext';
 import useLocalize from '@hooks/useLocalize';
@@ -29,23 +29,20 @@ function SearchSidebar({state}: SearchSidebarProps) {
     const params = route?.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.ROOT] | undefined;
     const {lastSearchType, setLastSearchType, currentSearchResults} = useSearchContext();
 
-    const queryJSON = useMemo(() => {
-        if (!params?.q) {
-            return undefined;
-        }
+    const queryJSON = params?.q ? buildSearchQueryJSON(params.q, params.rawQuery) : undefined;
 
-        return buildSearchQueryJSON(params.q, params.rawQuery);
-    }, [params?.q, params?.rawQuery]);
+    const searchType = currentSearchResults?.search?.type;
+    const isSearchLoading = currentSearchResults?.search?.isLoading;
 
     useEffect(() => {
-        if (!currentSearchResults?.search?.type) {
+        if (!searchType) {
             return;
         }
 
-        setLastSearchType(currentSearchResults.search.type);
-    }, [lastSearchType, queryJSON, setLastSearchType, currentSearchResults?.search?.type]);
+        setLastSearchType(searchType);
+    }, [lastSearchType, queryJSON, setLastSearchType, searchType]);
 
-    const shouldShowLoadingState = route?.name === SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT ? false : !isOffline && !!currentSearchResults?.search?.isLoading;
+    const shouldShowLoadingState = route?.name === SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT ? false : !isOffline && !!isSearchLoading;
 
     if (shouldUseNarrowLayout) {
         return null;

src/components/ReportWelcomeText.tsx

@@ -1,5 +1,5 @@
 import {createPersonalDetailsSelector} from '@selectors/PersonalDetails';
-import React, {useMemo} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import useEnvironment from '@hooks/useEnvironment';
@@ -90,37 +90,20 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
         moneyRequestOptions.includes(CONST.IOU.TYPE.TRACK) ||
         moneyRequestOptions.includes(CONST.IOU.TYPE.SPLIT);
 
-    const reportDetailsLink = useMemo(() => {
-        if (!report?.reportID) {
-            return '';
-        }
-
-        return `${environmentURL}/${ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID, Navigation.getReportRHPActiveRoute())}`;
-    }, [environmentURL, report?.reportID]);
-
-    const welcomeHeroText = useMemo(() => {
-        if (isInvoiceRoom) {
-            return translate('reportActionsView.sayHello');
-        }
-
-        if (isChatRoom) {
-            return translate('reportActionsView.welcomeToRoom', {roomName: reportName});
-        }
-
-        if (isSelfDM) {
-            return translate('reportActionsView.yourSpace');
-        }
-
-        if (isSystemChat) {
-            return reportName;
-        }
-
-        if (isPolicyExpenseChat) {
-            return translate('reportActionsView.welcomeToRoom', {roomName: policyName});
-        }
-
-        return translate('reportActionsView.sayHello');
-    }, [isChatRoom, isInvoiceRoom, isPolicyExpenseChat, isSelfDM, isSystemChat, translate, policyName, reportName]);
+    const reportDetailsLink = report?.reportID ? `${environmentURL}/${ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID, Navigation.getReportRHPActiveRoute())}` : '';
+
+    let welcomeHeroText = translate('reportActionsView.sayHello');
+    if (isInvoiceRoom) {
+        welcomeHeroText = translate('reportActionsView.sayHello');
+    } else if (isChatRoom) {
+        welcomeHeroText = translate('reportActionsView.welcomeToRoom', {roomName: reportName});
+    } else if (isSelfDM) {
+        welcomeHeroText = translate('reportActionsView.yourSpace');
+    } else if (isSystemChat) {
+        welcomeHeroText = reportName;
+    } else if (isPolicyExpenseChat) {
+        welcomeHeroText = translate('reportActionsView.welcomeToRoom', {roomName: policyName});
+    }
 
     // If we are the only participant (e.g. solo group chat) then keep the current user personal details so the welcome message does not show up empty.
     const shouldExcludeCurrentUser = participantAccountIDs.length > 0;