Bump babel-plugin-react-compiler to experimental build (TemplateLiteral key fix)

package.json

@@ -286,7 +286,7 @@
     "babel-jest": "29.7.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-react-compiler": "1.0.0",
+    "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260422",
     "babel-plugin-react-native-web": "^0.18.7",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "clean-webpack-plugin": "^4.0.0",
@@ -360,6 +360,7 @@
     "webpack-merge": "^5.8.0"
   },
   "overrides": {
+    "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260422",
     "braces": "3.0.3",
     "yargs": "17.7.2",
     "yargs-parser": "21.1.1",

src/components/AvatarWithImagePicker.tsx

@@ -1,5 +1,5 @@
 import {useIsFocused} from '@react-navigation/native';
-import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -141,7 +141,7 @@ function AvatarWithImagePicker({
     /**
      * Validates an image and opens avatar crop modal if valid
      */
-    const showAvatarCropModal = useCallback((image: FileObject) => {
+    const showAvatarCropModal = (image: FileObject) => {
         validateAvatarImage(image)
             .then((validationResult) => {
                 if (!validationResult.isValid) {
@@ -161,7 +161,7 @@ function AvatarWithImagePicker({
             .catch(() => {
                 setError('attachmentPicker.errorWhileSelectingCorruptedAttachment', {});
             });
-    }, []);
+    };
 
     const hideAvatarCropModal = () => {
         setIsAvatarCropModalOpen(false);
@@ -201,23 +201,20 @@ function AvatarWithImagePicker({
         return menuItems;
     };
 
-    const onPressAvatar = useCallback(
-        (openPicker: OpenPicker) => {
-            anchorRef.current?.blur();
-            if (disabled && enablePreview && onViewPhotoPress) {
-                onViewPhotoPress();
-                return;
-            }
-            if (isUsingDefaultAvatar) {
-                openPicker({
-                    onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
-                });
-                return;
-            }
-            setIsMenuVisible((prev) => !prev);
-        },
-        [disabled, enablePreview, isUsingDefaultAvatar, onViewPhotoPress, showAvatarCropModal],
-    );
+    const onPressAvatar = (openPicker: OpenPicker) => {
+        anchorRef.current?.blur();
+        if (disabled && enablePreview && onViewPhotoPress) {
+            onViewPhotoPress();
+            return;
+        }
+        if (isUsingDefaultAvatar) {
+            openPicker({
+                onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
+            });
+            return;
+        }
+        setIsMenuVisible((prev) => !prev);
+    };
 
     useLayoutEffect(() => {
         if (!anchorRef.current || !isMenuVisible) {

src/components/ConfirmedRoute.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useEffect} from 'react';
 import type {ReactNode} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -12,7 +12,6 @@ import {init as initMapboxToken, stop as stopMapboxToken} from '@userActions/Map
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Transaction} from '@src/types/onyx';
-import type {WaypointCollection} from '@src/types/onyx/Transaction';
 import type IconAsset from '@src/types/utils/IconAsset';
 import DistanceMapView from './DistanceMapView';
 import ImageSVG from './ImageSVG';
@@ -49,51 +48,38 @@ function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = tr
 
     const [mapboxAccessToken] = useOnyx(ONYXKEYS.MAPBOX_ACCESS_TOKEN);
 
-    const getMarkerComponent = useCallback(
-        (icon: IconAsset): ReactNode => (
-            <ImageSVG
-                src={icon}
-                width={CONST.MAP_MARKER_SIZE}
-                height={CONST.MAP_MARKER_SIZE}
-                fill={theme.icon}
-            />
-        ),
-        [theme],
-    );
-
-    const getWaypointMarkers = useCallback(
-        (waypointsData: WaypointCollection): WayPoint[] => {
-            const numberOfWaypoints = Object.keys(waypointsData).length;
-            const lastWaypointIndex = numberOfWaypoints - 1;
-
-            return Object.entries(waypointsData)
-                .map(([key, waypoint]) => {
-                    if (!waypoint?.lat || !waypoint?.lng) {
-                        return;
-                    }
-
-                    const index = getWaypointIndex(key);
-                    let MarkerComponent: IconAsset;
-                    if (index === 0) {
-                        MarkerComponent = expensifyIcons.DotIndicatorUnfilled;
-                    } else if (index === lastWaypointIndex) {
-                        MarkerComponent = expensifyIcons.Location;
-                    } else {
-                        MarkerComponent = expensifyIcons.DotIndicator;
-                    }
-
-                    return {
-                        id: `${waypoint.lng},${waypoint.lat},${index}`,
-                        coordinate: [waypoint.lng, waypoint.lat] as const,
-                        markerComponent: (): ReactNode => getMarkerComponent(MarkerComponent),
-                    };
-                })
-                .filter((waypoint): waypoint is WayPoint => !!waypoint);
-        },
-        [getMarkerComponent, expensifyIcons.DotIndicator, expensifyIcons.DotIndicatorUnfilled, expensifyIcons.Location],
+    const getMarkerComponent = (icon: IconAsset): ReactNode => (
+        <ImageSVG
+            src={icon}
+            width={CONST.MAP_MARKER_SIZE}
+            height={CONST.MAP_MARKER_SIZE}
+            fill={theme.icon}
+        />
     );
 
-    const waypointMarkers = getWaypointMarkers(waypoints);
+    const lastWaypointIndex = Object.keys(waypoints).length - 1;
+    const waypointMarkers: WayPoint[] = [];
+    for (const [key, waypoint] of Object.entries(waypoints)) {
+        if (!waypoint?.lat || !waypoint?.lng) {
+            continue;
+        }
+
+        const index = getWaypointIndex(key);
+        let MarkerComponent: IconAsset;
+        if (index === 0) {
+            MarkerComponent = expensifyIcons.DotIndicatorUnfilled;
+        } else if (index === lastWaypointIndex) {
+            MarkerComponent = expensifyIcons.Location;
+        } else {
+            MarkerComponent = expensifyIcons.DotIndicator;
+        }
+
+        waypointMarkers.push({
+            id: `${waypoint.lng},${waypoint.lat},${index}`,
+            coordinate: [waypoint.lng, waypoint.lat] as const,
+            markerComponent: (): ReactNode => getMarkerComponent(MarkerComponent),
+        });
+    }
 
     useEffect(() => {
         initMapboxToken();

src/components/DistanceRequest/DistanceRequestFooter.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
@@ -60,45 +60,37 @@ function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPa
     const mileageRate = isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(policyCurrency, transaction) : defaultMileageRate;
     const {unit} = mileageRate ?? {};
 
-    const getMarkerComponent = useCallback(
-        (icon: IconAsset): ReactNode => (
-            <ImageSVG
-                src={icon}
-                width={CONST.MAP_MARKER_SIZE}
-                height={CONST.MAP_MARKER_SIZE}
-                fill={theme.icon}
-            />
-        ),
-        [theme],
+    const getMarkerComponent = (icon: IconAsset): ReactNode => (
+        <ImageSVG
+            src={icon}
+            width={CONST.MAP_MARKER_SIZE}
+            height={CONST.MAP_MARKER_SIZE}
+            fill={theme.icon}
+        />
     );
 
-    const waypointMarkers = useMemo(
-        () =>
-            Object.entries(waypoints ?? {})
-                .map(([key, waypoint]) => {
-                    if (!waypoint?.lat || !waypoint?.lng) {
-                        return;
-                    }
+    const waypointMarkers: WayPoint[] = [];
+    for (const [key, waypoint] of Object.entries(waypoints ?? {})) {
+        if (!waypoint?.lat || !waypoint?.lng) {
+            continue;
+        }
 
-                    const index = getWaypointIndex(key);
-                    let MarkerComponent: IconAsset;
-                    if (index === 0) {
-                        MarkerComponent = expensifyIcons.DotIndicatorUnfilled;
-                    } else if (index === lastWaypointIndex) {
-                        MarkerComponent = expensifyIcons.Location;
-                    } else {
-                        MarkerComponent = expensifyIcons.DotIndicator;
-                    }
+        const index = getWaypointIndex(key);
+        let MarkerComponent: IconAsset;
+        if (index === 0) {
+            MarkerComponent = expensifyIcons.DotIndicatorUnfilled;
+        } else if (index === lastWaypointIndex) {
+            MarkerComponent = expensifyIcons.Location;
+        } else {
+            MarkerComponent = expensifyIcons.DotIndicator;
+        }
 
-                    return {
-                        id: `${waypoint.lng},${waypoint.lat},${index}`,
-                        coordinate: [waypoint.lng, waypoint.lat] as const,
-                        markerComponent: (): ReactNode => getMarkerComponent(MarkerComponent),
-                    };
-                })
-                .filter((waypoint): waypoint is WayPoint => !!waypoint),
-        [waypoints, lastWaypointIndex, getMarkerComponent, expensifyIcons.DotIndicator, expensifyIcons.DotIndicatorUnfilled, expensifyIcons.Location],
-    );
+        waypointMarkers.push({
+            id: `${waypoint.lng},${waypoint.lat},${index}`,
+            coordinate: [waypoint.lng, waypoint.lat] as const,
+            markerComponent: (): ReactNode => getMarkerComponent(MarkerComponent),
+        });
+    }
 
     return (
         <>

src/components/FeatureTrainingModal.tsx

@@ -1,6 +1,6 @@
 import type {ImageContentFit} from 'expo-image';
 import type {SourceLoadEventPayload} from 'expo-video';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Image, InteractionManager, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
@@ -267,7 +267,7 @@ function FeatureTrainingModal({
         setIllustrationAspectRatio(track.size.width / track.size.height);
     };
 
-    const renderIllustration = useCallback(() => {
+    const renderIllustration = () => {
         const aspectRatio = illustrationAspectRatio || VIDEO_ASPECT_RATIO;
 
         return (
@@ -333,34 +333,11 @@ function FeatureTrainingModal({
                 )}
             </View>
         );
-    }, [
-        illustrationAspectRatio,
-        styles.w100,
-        styles.featureTrainingModalImage,
-        styles.onboardingVideoPlayer,
-        styles.flex1,
-        styles.alignItemsCenter,
-        styles.justifyContentCenter,
-        styles.h100,
-        illustrationInnerContainerStyle,
-        videoURL,
-        image,
-        shouldRenderSVG,
-        contentFitImage,
-        imageWidth,
-        imageHeight,
-        videoStatus,
-        animationStyle,
-        animation,
-        shouldUseNarrowLayout,
-        isInLandscapeMode,
-        isReduceMotionEnabled,
-        illustrations.Hands,
-    ]);
-
-    const toggleWillShowAgain = useCallback(() => setWillShowAgain((prevWillShowAgain) => !prevWillShowAgain), []);
-
-    const closeModal = useCallback(() => {
+    };
+
+    const toggleWillShowAgain = () => setWillShowAgain((prevWillShowAgain) => !prevWillShowAgain);
+
+    const closeModal = () => {
         Log.hmmm(`[FeatureTrainingModal] closeModal called - willShowAgain: ${willShowAgain}, shouldGoBack: ${shouldGoBack}, hasOnClose: ${!!onClose}`);
 
         if (!willShowAgain) {
@@ -387,9 +364,9 @@ function FeatureTrainingModal({
                 Log.hmmm('[FeatureTrainingModal] No onClose callback provided');
             }
         });
-    }, [onClose, shouldGoBack, willShowAgain]);
+    };
 
-    const closeAndConfirmModal = useCallback(() => {
+    const closeAndConfirmModal = () => {
         Log.hmmm(`[FeatureTrainingModal] Button pressed - shouldCloseOnConfirm: ${shouldCloseOnConfirm}, hasOnConfirm: ${!!onConfirm}, willShowAgain: ${willShowAgain}`);
 
         if (shouldCloseOnConfirm) {
@@ -403,7 +380,7 @@ function FeatureTrainingModal({
         } else {
             Log.hmmm('[FeatureTrainingModal] No onConfirm callback provided');
         }
-    }, [shouldCloseOnConfirm, onConfirm, closeModal, willShowAgain]);
+    };
 
     // Scrolls modal to the bottom when keyboard appears so the action buttons are visible.
     useEffect(() => {
@@ -415,10 +392,7 @@ function FeatureTrainingModal({
 
     const Wrapper = shouldUseScrollView ? ScrollView : View;
 
-    const wrapperStyles = useMemo(
-        () => (shouldUseScrollView ? StyleUtils.getScrollableFeatureTrainingModalStyles(insets, isKeyboardActive) : {}),
-        [shouldUseScrollView, StyleUtils, insets, isKeyboardActive],
-    );
+    const wrapperStyles = shouldUseScrollView ? StyleUtils.getScrollableFeatureTrainingModalStyles(insets, isKeyboardActive) : {};
 
     return (
         <Modal