Merge pull request #51725 from callstack-internal/fix/app-freeze-on-cache-clear

fix: App freeze when clearing cache

Author: tylerkaraszewski

src/components/OptionListContextProvider.tsx

@@ -1,6 +1,5 @@
 import React, {createContext, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import usePrevious from '@hooks/usePrevious';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import type {OptionList} from '@libs/OptionsListUtils';
@@ -17,14 +16,11 @@ type OptionsListContextProps = {
     initializeOptions: () => void;
     /** Flag to check if the options are initialized */
     areOptionsInitialized: boolean;
+    /** Function to reset the options */
+    resetOptions: () => void;
 };
 
-type OptionsListProviderOnyxProps = {
-    /** Collection of reports */
-    reports: OnyxCollection<Report>;
-};
-
-type OptionsListProviderProps = OptionsListProviderOnyxProps & {
+type OptionsListProviderProps = {
     /** Actual content wrapped by this component */
     children: React.ReactNode;
 };
@@ -36,6 +32,7 @@ const OptionsListContext = createContext<OptionsListContextProps>({
     },
     initializeOptions: () => {},
     areOptionsInitialized: false,
+    resetOptions: () => {},
 });
 
 const isEqualPersonalDetail = (prevPersonalDetail: PersonalDetails | null, personalDetail: PersonalDetails | null) =>
@@ -44,12 +41,13 @@ const isEqualPersonalDetail = (prevPersonalDetail: PersonalDetails | null, perso
     prevPersonalDetail?.login === personalDetail?.login &&
     prevPersonalDetail?.displayName === personalDetail?.displayName;
 
-function OptionsListContextProvider({reports, children}: OptionsListProviderProps) {
+function OptionsListContextProvider({children}: OptionsListProviderProps) {
     const areOptionsInitialized = useRef(false);
     const [options, setOptions] = useState<OptionList>({
         reports: [],
         personalDetails: [],
     });
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
 
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const prevPersonalDetails = usePrevious(personalDetails);
@@ -144,9 +142,22 @@ function OptionsListContextProvider({reports, children}: OptionsListProviderProp
         areOptionsInitialized.current = true;
     }, [loadOptions]);
 
+    const resetOptions = useCallback(() => {
+        if (!areOptionsInitialized.current) {
+            return;
+        }
+
+        areOptionsInitialized.current = false;
+        setOptions({
+            reports: [],
+            personalDetails: [],
+        });
+    }, []);
+
     return (
-        // eslint-disable-next-line react-compiler/react-compiler
-        <OptionsListContext.Provider value={useMemo(() => ({options, initializeOptions, areOptionsInitialized: areOptionsInitialized.current}), [options, initializeOptions])}>
+        <OptionsListContext.Provider // eslint-disable-next-line react-compiler/react-compiler
+            value={useMemo(() => ({options, initializeOptions, areOptionsInitialized: areOptionsInitialized.current, resetOptions}), [options, initializeOptions, resetOptions])}
+        >
             {children}
         </OptionsListContext.Provider>
     );
@@ -157,7 +168,7 @@ const useOptionsListContext = () => useContext(OptionsListContext);
 // Hook to use the OptionsListContext with an initializer to load the options
 const useOptionsList = (options?: {shouldInitialize: boolean}) => {
     const {shouldInitialize = true} = options ?? {};
-    const {initializeOptions, options: optionsList, areOptionsInitialized} = useOptionsListContext();
+    const {initializeOptions, options: optionsList, areOptionsInitialized, resetOptions} = useOptionsListContext();
 
     useEffect(() => {
         if (!shouldInitialize || areOptionsInitialized) {
@@ -171,13 +182,10 @@ const useOptionsList = (options?: {shouldInitialize: boolean}) => {
         initializeOptions,
         options: optionsList,
         areOptionsInitialized,
+        resetOptions,
     };
 };
 
-export default withOnyx<OptionsListProviderProps, OptionsListProviderOnyxProps>({
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-})(OptionsListContextProvider);
+export default OptionsListContextProvider;
 
 export {useOptionsListContext, useOptionsList, OptionsListContext};

src/pages/settings/Troubleshoot/TroubleshootPage.tsx

@@ -11,6 +11,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import ImportOnyxState from '@components/ImportOnyxState';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import {useOptionsList} from '@components/OptionListContextProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
@@ -51,6 +52,7 @@ function TroubleshootPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [shouldStoreLogs] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
     const [shouldMaskOnyxState = true] = useOnyx(ONYXKEYS.SHOULD_MASK_ONYX_STATE);
+    const {resetOptions} = useOptionsList({shouldInitialize: false});
 
     const exportOnyxState = useCallback(() => {
         ExportOnyxState.readFromOnyxDatabase().then((value: Record<string, unknown>) => {
@@ -160,6 +162,7 @@ function TroubleshootPage() {
                                 isVisible={isConfirmationModalVisible}
                                 onConfirm={() => {
                                     setIsConfirmationModalVisible(false);
+                                    resetOptions();
                                     clearOnyxAndResetApp();
                                 }}
                                 onCancel={() => setIsConfirmationModalVisible(false)}

tests/perf-test/SearchRouter.perf-test.tsx

@@ -143,7 +143,7 @@ function SearchRouterInputWrapper() {
 function SearchRouterWrapperWithCachedOptions() {
     return (
         <ComposeProviders components={[OnyxProvider, LocaleContextProvider]}>
-            <OptionsListContext.Provider value={useMemo(() => ({options: mockedOptions, initializeOptions: () => {}, areOptionsInitialized: true}), [])}>
+            <OptionsListContext.Provider value={useMemo(() => ({options: mockedOptions, initializeOptions: () => {}, resetOptions: () => {}, areOptionsInitialized: true}), [])}>
                 <SearchRouter onRouterClose={mockOnClose} />
             </OptionsListContext.Provider>
         </ComposeProviders>