Merge pull request #60816 from software-mansion-labs/war-in/prepare-for-react-19

[Pre 0.79] Prepare for react 19

Author: roryabraham

src/components/AddPlaidBankAccount.tsx

@@ -6,10 +6,10 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {handlePlaidError, openPlaidBankAccountSelector, openPlaidBankLogin, setPlaidEvent} from '@libs/actions/BankAccounts';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
-import * as App from '@userActions/App';
-import * as BankAccounts from '@userActions/BankAccounts';
+import {handleRestrictedEvent} from '@userActions/App';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PlaidData} from '@src/types/onyx';
@@ -91,7 +91,7 @@ function AddPlaidBankAccount({
     const defaultSelectedPlaidAccountID = defaultSelectedPlaidAccount?.plaidAccountID ?? '-1';
     const defaultSelectedPlaidAccountMask = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID)?.mask ?? '';
     const subscribedKeyboardShortcuts = useRef<Array<() => void>>([]);
-    const previousNetworkState = useRef<boolean | undefined>();
+    const previousNetworkState = useRef<boolean | undefined>(undefined);
     const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask);
 
     const {translate} = useLocalize();
@@ -149,7 +149,7 @@ function AddPlaidBankAccount({
         if (isAuthenticatedWithPlaid()) {
             return unsubscribeToNavigationShortcuts;
         }
-        BankAccounts.openPlaidBankLogin(allowDebit, bankAccountID);
+        openPlaidBankLogin(allowDebit, bankAccountID);
         return unsubscribeToNavigationShortcuts;
 
         // disabling this rule, as we want this to run only on the first render
@@ -160,7 +160,7 @@ function AddPlaidBankAccount({
         // If we are coming back from offline and we haven't authenticated with Plaid yet, we need to re-run our call to kick off Plaid
         // previousNetworkState.current also makes sure that this doesn't run on the first render.
         if (previousNetworkState.current && !isOffline && !isAuthenticatedWithPlaid()) {
-            BankAccounts.openPlaidBankLogin(allowDebit, bankAccountID);
+            openPlaidBankLogin(allowDebit, bankAccountID);
         }
         previousNetworkState.current = isOffline;
     }, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]);
@@ -187,7 +187,7 @@ function AddPlaidBankAccount({
         onInputChange(plaidAccountID);
     };
 
-    const handlePlaidError = useCallback((error: ErrorEvent | null) => {
+    const handlePlaidLinkError = useCallback((error: ErrorEvent | null) => {
         Log.hmmm('[PlaidLink] Error: ', error?.message);
     }, []);
 
@@ -206,22 +206,22 @@ function AddPlaidBankAccount({
                     token={token}
                     onSuccess={({publicToken, metadata}) => {
                         Log.info('[PlaidLink] Success!');
-                        BankAccounts.openPlaidBankAccountSelector(publicToken, metadata?.institution?.name ?? '', allowDebit, bankAccountID);
+                        openPlaidBankAccountSelector(publicToken, metadata?.institution?.name ?? '', allowDebit, bankAccountID);
                     }}
-                    onError={handlePlaidError}
+                    onError={handlePlaidLinkError}
                     onEvent={(event, metadata) => {
-                        BankAccounts.setPlaidEvent(event);
+                        setPlaidEvent(event);
                         // Handle Plaid login errors (will potentially reset plaid token and item depending on the error)
                         if (event === 'ERROR') {
                             Log.hmmm('[PlaidLink] Error: ', {...metadata});
                             if (bankAccountID && metadata && 'error_code' in metadata) {
-                                BankAccounts.handlePlaidError(bankAccountID, metadata.error_code ?? '', metadata.error_message ?? '', metadata.request_id);
+                                handlePlaidError(bankAccountID, metadata.error_code ?? '', metadata.error_message ?? '', metadata.request_id);
                             }
                         }
 
                         // Limit the number of times a user can submit Plaid credentials
                         if (event === 'SUBMIT_CREDENTIALS') {
-                            App.handleRestrictedEvent(event);
+                            handleRestrictedEvent(event);
                         }
                     }}
                     // User prematurely exited the Plaid flow

src/components/AttachmentPicker/index.native.tsx

@@ -109,7 +109,7 @@ function AttachmentPicker({
     const theme = useTheme();
 
     const completeAttachmentSelection = useRef<(data: FileObject[]) => void>(() => {});
-    const onModalHide = useRef<() => void>();
+    const onModalHide = useRef<(() => void) | undefined>(undefined);
     const onCanceled = useRef<() => void>(() => {});
     const onClosed = useRef<() => void>(() => {});
     const popoverRef = useRef(null);

src/components/DeeplinkWrapper/index.website.tsx

@@ -44,7 +44,7 @@ function promptToOpenInDesktopApp(currentUserAccountID?: number, initialUrl = ''
 function DeeplinkWrapper({children, isAuthenticated, autoAuthState, initialUrl}: DeeplinkWrapperProps) {
     const [currentScreen, setCurrentScreen] = useState<string | undefined>();
     const [hasShownPrompt, setHasShownPrompt] = useState(false);
-    const removeListener = useRef<() => void>();
+    const removeListener = useRef<(() => void) | undefined>(undefined);
     const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {
         selector: (account) => !!account?.delegatedAccess?.delegate,
         canBeMissing: true,

src/components/EmojiPicker/EmojiPicker.tsx

@@ -44,8 +44,8 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
     });
     const onModalHide = useRef<OnModalHideValue>(() => {});
     const onEmojiSelected = useRef<OnEmojiSelected>(() => {});
-    const activeEmoji = useRef<string | undefined>();
-    const emojiSearchInput = useRef<BaseTextInputRef | null>();
+    const activeEmoji = useRef<string | undefined>(undefined);
+    const emojiSearchInput = useRef<BaseTextInputRef | null>(null);
     const {windowHeight} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 

src/components/Image/index.tsx

@@ -52,7 +52,7 @@ function Image({source: propsSource, isAuthTokenRequired = false, onLoad, object
     /**
      * trying to figure out if the current session is expired or fresh from a necessary reauthentication
      */
-    const previousSessionAge = useRef<number | undefined>();
+    const previousSessionAge = useRef<number | undefined>(undefined);
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const validSessionAge: number | undefined = useMemo(() => {
         // Authentication is required only for certain types of images (attachments and receipts),

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -37,7 +37,7 @@ function OptionRowLHNData({
     const currentReportIDValue = useCurrentReportID();
     const isReportFocused = isFocused && currentReportIDValue?.currentReportID === reportID;
 
-    const optionItemRef = useRef<OptionData>();
+    const optionItemRef = useRef<OptionData | undefined>(undefined);
 
     const shouldDisplayViolations = shouldDisplayViolationsRBRInLHN(fullReport, transactionViolations);
     const isReportSettled = isSettled(fullReport);

src/components/MagicCodeInput.tsx

@@ -114,7 +114,7 @@ function MagicCodeInput(
 ) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const inputRef = useRef<BaseTextInputRef | null>();
+    const inputRef = useRef<BaseTextInputRef | null>(null);
     const [input, setInput] = useState(TEXT_INPUT_EMPTY_STATE);
     const [focusedIndex, setFocusedIndex] = useState<number | undefined>(0);
     const editIndex = useRef(0);

src/components/Modal/BottomDockedModal/index.tsx

@@ -42,7 +42,7 @@ function BottomDockedModal({
     const [deviceWidth, setDeviceWidth] = useState(() => Dimensions.get('window').width);
     const [deviceHeight, setDeviceHeight] = useState(() => Dimensions.get('window').height);
     const backHandlerListener = useRef<NativeEventSubscription | null>(null);
-    const handleRef = useRef<number>();
+    const handleRef = useRef<number | undefined>(undefined);
 
     const styles = useThemeStyles();
 

src/components/Navigation/TopLevelNavigationTabBar/index.tsx

@@ -31,7 +31,7 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {paddingBottom} = useSafeAreaPaddings();
     const [isAfterClosingTransition, setIsAfterClosingTransition] = useState(false);
-    const cancelAfterInteractions = useRef<ReturnType<typeof InteractionManager.runAfterInteractions> | undefined>();
+    const cancelAfterInteractions = useRef<ReturnType<typeof InteractionManager.runAfterInteractions> | undefined>(undefined);
     const {isBlockingViewVisible} = useContext(FullScreenBlockingViewContext);
     const {canUseLeftHandBar} = usePermissions();
     const StyleUtils = useStyleUtils();

src/components/PDFView/PDFPasswordForm.tsx

@@ -43,7 +43,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid = false, shouldShowLoadin
     const [shouldShowForm, setShouldShowForm] = useState(false);
     const textInputRef = useRef<BaseTextInputRef>(null);
 
-    const focusTimeoutRef = useRef<NodeJS.Timeout>();
+    const focusTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
     const errorText = useMemo(() => {
         if (isPasswordInvalid) {

src/components/QRShare/index.tsx

@@ -22,7 +22,7 @@ function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBac
     const qrCodeContainerWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth;
 
     const [qrCodeSize, setQrCodeSize] = useState<number>(qrCodeContainerWidth - styles.ph5.paddingHorizontal * 2 - variables.qrShareHorizontalPadding * 2);
-    const svgRef = useRef<Svg>();
+    const svgRef = useRef<Svg | undefined>(undefined);
 
     useImperativeHandle(
         ref,

src/components/Search/SearchRouter/SearchRouterContext.tsx

@@ -30,7 +30,7 @@ const Context = React.createContext<SearchRouterContext>(defaultSearchContext);
 function SearchRouterContextProvider({children}: ChildrenProps) {
     const [isSearchRouterDisplayed, setIsSearchRouterDisplayed] = useState(false);
     const searchRouterDisplayedRef = useRef(false);
-    const searchPageInputRef = useRef<AnimatedTextInputRef>();
+    const searchPageInputRef = useRef<AnimatedTextInputRef | undefined>(undefined);
 
     const routerContext = useMemo(() => {
         const openSearchRouter = () => {

src/components/SettlementButton/AnimatedSettlementButton.tsx

@@ -38,7 +38,7 @@ function AnimatedSettlementButton({
     const height = useSharedValue<number>(variables.componentSizeNormal);
     const [canShow, setCanShow] = React.useState(true);
     const [minWidth, setMinWidth] = React.useState<number>(0);
-    const viewRef = useRef<HTMLElement | null>();
+    const viewRef = useRef<HTMLElement | null>(null);
 
     const containerStyles = useAnimatedStyle(() => ({
         height: height.get(),

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -20,11 +20,11 @@ type ScrollingEventData = {
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
  */
 function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNavigate = true, shouldHideOnScroll = false, ...props}: EducationalTooltipProps) {
-    const genericTooltipStateRef = useRef<GenericTooltipState>();
-    const tooltipElementRef = useRef<Readonly<NativeMethods>>();
+    const genericTooltipStateRef = useRef<GenericTooltipState | undefined>(undefined);
+    const tooltipElementRef = useRef<Readonly<NativeMethods> | undefined>(undefined);
 
     const [shouldMeasure, setShouldMeasure] = useState(false);
-    const show = useRef<() => void>();
+    const show = useRef<(() => void) | undefined>(undefined);
 
     const navigator = useContext(NavigationContext);
     const insets = useSafeAreaInsets();

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -128,7 +128,7 @@ function BaseValidateCodeForm({
     const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
     const validateCodeSent = useMemo(() => hasMagicCodeBeenSent ?? validateCodeAction?.validateCodeSent, [hasMagicCodeBeenSent, validateCodeAction?.validateCodeSent]);
     const latestValidateCodeError = getLatestErrorField(validateCodeAction, validateCodeActionErrorField);
-    const timerRef = useRef<NodeJS.Timeout>();
+    const timerRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
     useImperativeHandle(innerRef, () => ({
         focus() {

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -336,7 +336,7 @@ function BaseVideoPlayer({
         currentVideoPlayerRef.current = videoPlayerRef.current;
     }, [url, currentVideoPlayerRef, isUploading, pauseVideo]);
 
-    const isCurrentlyURLSetRef = useRef<boolean>();
+    const isCurrentlyURLSetRef = useRef<boolean | undefined>(undefined);
     isCurrentlyURLSetRef.current = isCurrentlyURLSet;
 
     useEffect(

src/components/VideoPlayerContexts/PlaybackContext/usePlaybackContextVideoRefs.ts

@@ -6,7 +6,7 @@ import type {PlaybackContextVideoRefs, PlayVideoPromiseRef, StopVideo, UnloadVid
 function usePlaybackContextVideoRefs(resetCallback: () => void) {
     const currentVideoPlayerRef: PlaybackContextVideoRefs['ref'] = useRef(null);
     const videoResumeTryNumberRef: PlaybackContextVideoRefs['resumeTryNumberRef'] = useRef(0);
-    const playVideoPromiseRef: PlayVideoPromiseRef = useRef();
+    const playVideoPromiseRef: PlayVideoPromiseRef = useRef(undefined);
     const isPlayPendingRef = useRef(false);
 
     const pauseVideo: PlaybackContextVideoRefs['pause'] = useCallback(() => {

src/hooks/useDebounce.ts

@@ -21,7 +21,7 @@ type GenericFunction = (...args: any[]) => void;
  * @returns Returns a function to call the debounced function.
  */
 export default function useDebounce<T extends GenericFunction>(func: T, wait: number, options?: DebounceSettings): T {
-    const debouncedFnRef = useRef<DebouncedFunc<T>>();
+    const debouncedFnRef = useRef<DebouncedFunc<T> | undefined>(undefined);
     const {leading, maxWait, trailing = true} = options ?? {};
 
     useEffect(() => {

src/hooks/useDebounceNonReactive.ts

@@ -23,7 +23,7 @@ type GenericFunction = (...args: any[]) => void;
  */
 export default function useDebounceNonReactive<T extends GenericFunction>(func: T, wait: number, options?: DebounceSettings): T {
     const funcRef = useRef<T>(func); // Store the latest func reference
-    const debouncedFnRef = useRef<DebouncedFunc<T>>();
+    const debouncedFnRef = useRef<DebouncedFunc<T> | undefined>(undefined);
     const {leading, maxWait, trailing = true} = options ?? {};
 
     useEffect(() => {

src/hooks/useDeepCompareRef.ts

@@ -16,7 +16,7 @@ import {useRef} from 'react';
  * }, [deepComparedArray]);
  */
 export default function useDeepCompareRef<T>(value: T): T | undefined {
-    const ref = useRef<T>();
+    const ref = useRef<T | undefined>(undefined);
     // eslint-disable-next-line react-compiler/react-compiler
     if (!isEqual(value, ref.current)) {
         // eslint-disable-next-line react-compiler/react-compiler

src/hooks/useSingleExecution/index.native.ts

@@ -8,7 +8,7 @@ type Action<T extends unknown[]> = (...params: T) => void | Promise<void>;
  */
 export default function useSingleExecution() {
     const [isExecuting, setIsExecuting] = useState(false);
-    const isExecutingRef = useRef<boolean>();
+    const isExecutingRef = useRef<boolean | undefined>(undefined);
 
     // eslint-disable-next-line react-compiler/react-compiler
     isExecutingRef.current = isExecuting;

src/libs/actions/IOU.ts

@@ -4377,7 +4377,7 @@ function updateMoneyRequestTag(
 /** Updates the created tax amount of an expense */
 function updateMoneyRequestTaxAmount(
     transactionID: string,
-    optimisticReportActionID: string,
+    optimisticReportActionID: string | undefined,
     taxAmount: number,
     policy: OnyxEntry<OnyxTypes.Policy>,
     policyTagList: OnyxEntry<OnyxTypes.PolicyTagLists>,

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

@@ -34,13 +34,13 @@ function extractPointerEvent(event: GestureResponderEvent | MouseEvent): MouseEv
 
 function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<ReportActionContextMenu>) {
     const {translate} = useLocalize();
-    const reportIDRef = useRef<string | undefined>();
-    const typeRef = useRef<ContextMenuType>();
+    const reportIDRef = useRef<string | undefined>(undefined);
+    const typeRef = useRef<ContextMenuType | undefined>(undefined);
     const reportActionRef = useRef<NonNullable<OnyxEntry<ReportAction>> | null>(null);
-    const reportActionIDRef = useRef<string | undefined>();
-    const originalReportIDRef = useRef<string | undefined>();
+    const reportActionIDRef = useRef<string | undefined>(undefined);
+    const originalReportIDRef = useRef<string | undefined>(undefined);
     const selectionRef = useRef('');
-    const reportActionDraftMessageRef = useRef<string>();
+    const reportActionDraftMessageRef = useRef<string | undefined>(undefined);
 
     const cursorRelativePosition = useRef({
         horizontal: 0,

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/index.e2e.tsx

@@ -26,7 +26,7 @@ function ComposerWithSuggestionsE2e(props: ComposerWithSuggestionsProps, ref: Fo
     // for this component. This file is only used for e2e tests, so it's okay to
     // disable compiler for this file.
 
-    const textInputRef = useRef<ComposerRef | null>();
+    const textInputRef = useRef<ComposerRef | null>(null);
     const hasFocusBeenRequested = useRef(false);
     const onLayout = useCallback((event: LayoutChangeEvent) => {
         const testConfig = E2EClient.getCurrentActiveTestConfig();
@@ -78,7 +78,7 @@ function ComposerWithSuggestionsE2e(props: ComposerWithSuggestionsProps, ref: Fo
             }}
             onLayout={onLayout}
         >
-            {/* Important: 
+            {/* Important:
                     this has to be a child, as this container might not
                     re-render while the actual ComposerWithSuggestions will.
             */}

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -168,7 +168,7 @@ function ReportActionCompose({
     const [exceededMaxLength, setExceededMaxLength] = useState<number | null>(null);
 
     const suggestionsRef = useRef<SuggestionsRef>(null);
-    const composerRef = useRef<ComposerRef>();
+    const composerRef = useRef<ComposerRef | undefined>(undefined);
     const reportParticipantIDs = useMemo(
         () =>
             Object.keys(report?.participants ?? {})

src/pages/iou/request/step/DiscardChangesConfirmation/index.native.tsx

@@ -9,7 +9,7 @@ import type DiscardChangesConfirmationProps from './types';
 function DiscardChangesConfirmation({getHasUnsavedChanges}: DiscardChangesConfirmationProps) {
     const {translate} = useLocalize();
     const [isVisible, setIsVisible] = useState(false);
-    const blockedNavigationAction = useRef<NavigationAction>();
+    const blockedNavigationAction = useRef<NavigationAction | undefined>(undefined);
 
     useBeforeRemove(
         useCallback(