Merge pull request #52550 from Nodebrute/migrateUseOnyx

migrate sidebarLinkData to useOnyx

src/pages/home/sidebar/SidebarLinksData.tsx

@@ -1,11 +1,8 @@
 import {useIsFocused} from '@react-navigation/native';
-import lodashIsEqual from 'lodash/isEqual';
-import React, {memo, useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
-import type {ValueOf} from 'type-fest';
 import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState';
 import useLocalize from '@hooks/useLocalize';
 import {useReportIDs} from '@hooks/useReportIDs';
@@ -15,24 +12,18 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SidebarLinks from './SidebarLinks';
 
-type SidebarLinksDataOnyxProps = {
-    /** Whether the reports are loading. When false it means they are ready to be used. */
-    isLoadingApp: OnyxEntry<boolean>;
-
-    /** The chat priority mode */
-    priorityMode: OnyxEntry<ValueOf<typeof CONST.PRIORITY_MODE>>;
-};
-
-type SidebarLinksDataProps = SidebarLinksDataOnyxProps & {
+type SidebarLinksDataProps = {
     /** Safe area insets required for mobile devices margins */
     insets: EdgeInsets;
 };
 
-function SidebarLinksData({insets, isLoadingApp = true, priorityMode = CONST.PRIORITY_MODE.DEFAULT}: SidebarLinksDataProps) {
+function SidebarLinksData({insets}: SidebarLinksDataProps) {
     const isFocused = useIsFocused();
     const styles = useThemeStyles();
     const activeWorkspaceID = useActiveWorkspaceFromNavigationState();
     const {translate} = useLocalize();
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
+    const [priorityMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE, {initialValue: CONST.PRIORITY_MODE.DEFAULT});
 
     const {orderedReportIDs, currentReportID, policyMemberAccountIDs} = useReportIDs();
 
@@ -45,7 +36,6 @@ function SidebarLinksData({insets, isLoadingApp = true, priorityMode = CONST.PRI
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [activeWorkspaceID]);
 
-    const isLoading = isLoadingApp;
     const currentReportIDRef = useRef(currentReportID);
     // eslint-disable-next-line react-compiler/react-compiler
     currentReportIDRef.current = currentReportID;
@@ -64,7 +54,7 @@ function SidebarLinksData({insets, isLoadingApp = true, priorityMode = CONST.PRI
                 priorityMode={priorityMode ?? CONST.PRIORITY_MODE.DEFAULT}
                 // Data props:
                 isActiveReport={isActiveReport}
-                isLoading={isLoading ?? false}
+                isLoading={isLoadingApp ?? false}
                 activeWorkspaceID={activeWorkspaceID}
                 optionListItems={orderedReportIDs}
             />
@@ -74,22 +64,4 @@ function SidebarLinksData({insets, isLoadingApp = true, priorityMode = CONST.PRI
 
 SidebarLinksData.displayName = 'SidebarLinksData';
 
-export default withOnyx<SidebarLinksDataProps, SidebarLinksDataOnyxProps>({
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-    priorityMode: {
-        key: ONYXKEYS.NVP_PRIORITY_MODE,
-        initialValue: CONST.PRIORITY_MODE.DEFAULT,
-    },
-})(
-    /*
-While working on audit on the App Start App metric we noticed that by memoizing SidebarLinksData we can avoid 2 additional run of getOrderedReportIDs.
-With that we can reduce app start up time by ~2s on heavy account.
-More details - https://github.com/Expensify/App/issues/35234#issuecomment-1926914534
-*/
-    memo(
-        SidebarLinksData,
-        (prevProps, nextProps) => prevProps.isLoadingApp === nextProps.isLoadingApp && prevProps.priorityMode === nextProps.priorityMode && lodashIsEqual(prevProps.insets, nextProps.insets),
-    ),
-);
+export default SidebarLinksData;