Add small improvements related to introducing React strict mode

package.json

@@ -188,8 +188,7 @@
     "react-web-config": "^1.0.0",
     "react-webcam": "^7.1.1",
     "react-window": "^1.8.9",
-    "semver": "^7.5.2",
-    "shim-keyboard-event-key": "^1.0.3"
+    "semver": "^7.5.2"
   },
   "devDependencies": {
     "@actions/core": "1.10.0",

src/components/TextInput/TextInputClearButton/index.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react';
+import React from 'react';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithoutFeedback} from '@components/Pressable';
@@ -40,4 +40,4 @@ function TextInputClearButton({onPressButton}: TextInputClearButtonProps) {
 
 TextInputClearButton.displayName = 'TextInputClearButton';
 
-export default forwardRef(TextInputClearButton);
+export default TextInputClearButton;

src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts

@@ -1,35 +1,15 @@
 import {useEffect} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import usePermissions from '@hooks/usePermissions';
 import {getPolicyEmployeeListByIdWithoutCurrentUser} from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PersonalDetailsList, Policy, Report, ReportMetadata} from '@src/types/onyx';
+import type {Policy, Report, ReportMetadata} from '@src/types/onyx';
 import type {ReportScreenWrapperProps} from './ReportScreenWrapper';
 
-type ReportScreenIDSetterComponentProps = {
-    /** Available reports that would be displayed in this navigator */
-    reports: OnyxCollection<Report>;
-
-    /** The policies which the user has access to */
-    policies: OnyxCollection<Policy>;
-
-    /** The personal details of the person who is logged in */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-
-    /** Whether user is a new user */
-    isFirstTimeNewExpensifyUser: OnyxEntry<boolean>;
-
-    /** The report metadata */
-    reportMetadata: OnyxCollection<ReportMetadata>;
-
-    /** The accountID of the current user */
-    accountID?: number;
-};
-
-type ReportScreenIDSetterProps = ReportScreenIDSetterComponentProps & ReportScreenWrapperProps;
+type ReportScreenIDSetterProps = ReportScreenWrapperProps;
 
 /**
  * Get the most recently accessed report for the user
@@ -57,11 +37,18 @@ const getLastAccessedReportID = (
     return lastReport?.reportID;
 };
 
-// This wrapper is reponsible for opening the last accessed report if there is no reportID specified in the route params
-function ReportScreenIDSetter({route, reports, policies, navigation, isFirstTimeNewExpensifyUser = false, reportMetadata, accountID, personalDetails}: ReportScreenIDSetterProps) {
+// This wrapper is responsible for opening the last accessed report if there is no reportID specified in the route params
+function ReportScreenIDSetter({route, navigation}: ReportScreenIDSetterProps) {
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
 
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {allowStaleData: true});
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true});
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [isFirstTimeNewExpensifyUser] = useOnyx(ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, {initialValue: false});
+    const [reportMetadata] = useOnyx(ONYXKEYS.COLLECTION.REPORT_METADATA, {allowStaleData: true});
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID});
+
     useEffect(() => {
         // Don't update if there is a reportID in the params already
         if (route?.params?.reportID) {
@@ -101,28 +88,4 @@ function ReportScreenIDSetter({route, reports, policies, navigation, isFirstTime
 
 ReportScreenIDSetter.displayName = 'ReportScreenIDSetter';
 
-export default withOnyx<ReportScreenIDSetterProps, ReportScreenIDSetterComponentProps>({
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-        allowStaleData: true,
-    },
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-        allowStaleData: true,
-    },
-    isFirstTimeNewExpensifyUser: {
-        key: ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER,
-        initialValue: false,
-    },
-    reportMetadata: {
-        key: ONYXKEYS.COLLECTION.REPORT_METADATA,
-        allowStaleData: true,
-    },
-    accountID: {
-        key: ONYXKEYS.SESSION,
-        selector: (session) => session?.accountID,
-    },
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-})(ReportScreenIDSetter);
+export default ReportScreenIDSetter;

src/setup/platformSetup/index.website.ts

@@ -1,6 +1,4 @@
 import {AppRegistry} from 'react-native';
-// This is a polyfill for InternetExplorer to support the modern KeyboardEvent.key and KeyboardEvent.code instead of KeyboardEvent.keyCode
-import 'shim-keyboard-event-key';
 import checkForUpdates from '@libs/checkForUpdates';
 import DateUtils from '@libs/DateUtils';
 import Visibility from '@libs/Visibility';