Merge pull request Expensify#65575 from callstack-internal/perf/limit-search-routes-to-render

Perf: Limit previous Search screens mounted

Author: mountiny

contributingGuides/NAVIGATION.md

@@ -654,7 +654,7 @@ function useCustomRootStackNavigatorState({state}: CustomStateHookProps) {
 }
 ```
 
-To optimize the number of routes rendered in `RootStackNavigator` we limit the number of `FullScreenNavigators` rendered to 2 (we need to render the previous fullscreen too for the transition animations to work well). 
+To optimize the number of routes rendered in `RootStackNavigator` we limit the number of `FullScreenNavigators` rendered to 2 (we need to render the previous fullscreen too for the transition animations to work well). There's an exception for `SearchFullscreenNavigator` where we render only last route when possible due to performance implications. The idea stays the same.
 
 -   `src/libs/Navigation/AppNavigator/createSearchFullscreenNavigator/index.tsx`
 
@@ -664,10 +664,9 @@ function useCustomEffects(props: CustomEffectsHookProps) {
     usePreserveNavigatorState(props.state, props.parentRoute);
 }
 
-// This is a custom state hook that is used to render the last two routes in the stack.
-// We do this to improve the performance of the search results screen.
-function useCustomState({state}: CustomStateHookProps) {
-    const routesToRender = [...state.routes.slice(-2)];
+// For web we only render last route in SearchFullscreenNavigator. Other navigators are keep last two routes mounted. The idea stays the same.
+export default function useCustomState({state}: CustomStateHookProps) {
+    const routesToRender = state.routes.slice(-1);
     return {...state, routes: routesToRender, index: routesToRender.length - 1};
 }
 ```

src/libs/Navigation/AppNavigator/createSearchFullscreenNavigator/index.tsx

@@ -5,27 +5,15 @@ import usePreserveNavigatorState from '@libs/Navigation/AppNavigator/createSplit
 import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange';
 import createPlatformStackNavigatorComponent from '@navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent';
 import defaultPlatformStackScreenOptions from '@navigation/PlatformStackNavigation/defaultPlatformStackScreenOptions';
-import type {
-    CustomEffectsHookProps,
-    CustomStateHookProps,
-    PlatformStackNavigationEventMap,
-    PlatformStackNavigationOptions,
-    PlatformStackNavigationState,
-} from '@navigation/PlatformStackNavigation/types';
+import type {CustomEffectsHookProps, PlatformStackNavigationEventMap, PlatformStackNavigationOptions, PlatformStackNavigationState} from '@navigation/PlatformStackNavigation/types';
 import SearchFullscreenRouter from './SearchFullscreenRouter';
+import useCustomState from './useCustomState';
 
 function useCustomEffects(props: CustomEffectsHookProps) {
     useNavigationResetOnLayoutChange(props);
     usePreserveNavigatorState(props.state, props.parentRoute);
 }
 
-// This is a custom state hook that is used to render the last two routes in the stack.
-// We do this to improve the performance of the search results screen.
-function useCustomState({state}: CustomStateHookProps) {
-    const routesToRender = [...state.routes.slice(-2)];
-    return {...state, routes: routesToRender, index: routesToRender.length - 1};
-}
-
 const SearchFullscreenNavigatorComponent = createPlatformStackNavigatorComponent('SearchFullscreenNavigator', {
     createRouter: SearchFullscreenRouter,
     defaultScreenOptions: defaultPlatformStackScreenOptions,

src/libs/Navigation/AppNavigator/createSearchFullscreenNavigator/useCustomState/index.native.ts

@@ -0,0 +1,13 @@
+import type {CustomStateHookProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import SCREENS from '@src/SCREENS';
+
+/**
+ * This is a custom state hook for SearchFullscreenNavigator that is used to render the last two search routes in the stack.
+ * For native platforms, we render the last two routes to allow users to return by swiping left.
+ * @see SearchFullscreenNavigator use only!
+ */
+export default function useCustomState({state}: CustomStateHookProps) {
+    const lastSearchNavigatorIndex = state.routes.findLastIndex((route) => route.name === SCREENS.SEARCH.ROOT);
+    const routesToRender = state.routes.slice(Math.max(0, lastSearchNavigatorIndex), state.routes.length);
+    return {...state, routes: routesToRender, index: routesToRender.length - 1};
+}

src/libs/Navigation/AppNavigator/createSearchFullscreenNavigator/useCustomState/index.ts

@@ -0,0 +1,11 @@
+import type {CustomStateHookProps} from '@libs/Navigation/PlatformStackNavigation/types';
+
+/**
+ * This is a custom state hook for SearchFullscreenNavigator that is used to render the last search route in the stack.
+ * We do this to improve the performance of the search results screen by avoiding unnecessary re-renders of underneath routes.
+ * @see SearchFullscreenNavigator use only!
+ */
+export default function useCustomState({state}: CustomStateHookProps) {
+    const routesToRender = state.routes.slice(-1);
+    return {...state, routes: routesToRender, index: routesToRender.length - 1};
+}