perf: stop WorkspacesTabButton re-rendering on every navigation

TMisiukiewicz · TMisiukiewicz · commit c4888349021d · 2026-05-07T12:59:04.000+02:00
diff --git a/src/hooks/useRestoreWorkspacesTabOnNavigate.ts b/src/hooks/useRestoreWorkspacesTabOnNavigate.ts
@@ -1,113 +1,90 @@
-import {useCallback} from 'react';
-import type {OnyxCollection} from 'react-native-onyx';
+import type {NavigationState, PartialState} from '@react-navigation/native';
 import {getPreservedNavigatorState} from '@libs/Navigation/AppNavigator/createSplitNavigator/usePreserveNavigatorState';
 import {isFullScreenName, isWorkspaceNavigatorRouteName} from '@libs/Navigation/helpers/isNavigatorName';
 import {getWorkspacesTabStateFromSessionStorage} from '@libs/Navigation/helpers/lastVisitedTabPathUtils';
 import navigateToWorkspacesPage from '@libs/Navigation/helpers/navigateToWorkspacesPage';
 import {getTabState} from '@libs/Navigation/helpers/tabNavigatorUtils';
+import navigationRef from '@libs/Navigation/navigationRef';
 import type {DomainSplitNavigatorParamList, WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {Domain, Policy} from '@src/types/onyx';
-import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
-import useOnyx from './useOnyx';
 import useResponsiveLayout from './useResponsiveLayout';
-import useRootNavigationState from './useRootNavigationState';
+
+type WorkspaceRouteType = NavigationState['routes'][number] | NonNullable<PartialState<NavigationState>['routes']>[number];
+type WorkspaceParams = WorkspaceSplitNavigatorParamList[typeof SCREENS.WORKSPACE.INITIAL] | DomainSplitNavigatorParamList[typeof SCREENS.DOMAIN.INITIAL];
+
+/**
+ * Walks the root nav state to find the last workspace/domain route the user had open.
+ * Falls back to session storage when no live workspace route exists.
+ *
+ * Multiple TAB_NAVIGATOR instances can coexist in the root stack — when navigation from
+ * inside an RHP targets a tab, linkTo PUSHes a fresh TabNavigator above the modal, and that
+ * new instance's WORKSPACE_NAVIGATOR slot starts empty. Older instances kept alive by
+ * ensureTabNavigatorRoutes still hold the previous workspace state, so flatten every
+ * workspace route from every TabNavigator in stack order and take the most recent one.
+ */
+function findLastWorkspaceRoute(rootState: NavigationState | undefined): WorkspaceRouteType | undefined {
+    const topmostFullScreenRoute = rootState?.routes?.findLast((route) => isFullScreenName(route.name));
+    if (!topmostFullScreenRoute) {
+        return undefined;
+    }
+
+    const lastWorkspaceRoute = (rootState?.routes ?? [])
+        .filter((route) => route.name === NAVIGATORS.TAB_NAVIGATOR)
+        .flatMap((tabNavigatorRoute) => {
+            const workspaceNavigatorRoute = getTabState(tabNavigatorRoute)?.routes?.find((route) => route.name === NAVIGATORS.WORKSPACE_NAVIGATOR);
+            const workspaceNavigatorState = workspaceNavigatorRoute?.state ?? (workspaceNavigatorRoute?.key ? getPreservedNavigatorState(workspaceNavigatorRoute.key) : undefined);
+            return workspaceNavigatorState?.routes?.filter((route) => isWorkspaceNavigatorRouteName(route.name)) ?? [];
+        })
+        .at(-1);
+
+    if (lastWorkspaceRoute) {
+        return lastWorkspaceRoute;
+    }
+
+    return getWorkspacesTabStateFromSessionStorage()
+        ?.routes?.findLast((route) => route.name === NAVIGATORS.WORKSPACE_NAVIGATOR)
+        ?.state?.routes?.findLast((route) => isWorkspaceNavigatorRouteName(route.name));
+}
+
+function getWorkspacesTabState(route: WorkspaceRouteType | undefined): NavigationState | PartialState<NavigationState> | undefined {
+    if (!route) {
+        return undefined;
+    }
+    return route.state ?? (route.key ? getPreservedNavigatorState(route.key) : undefined);
+}
 
 /**
  * The Workspaces tab can show three things: the workspaces list, a specific workspace page,
  * or a specific domain page. When the user navigates away and comes back to the tab,
  * this hook ensures they return to whichever of those they had open last — not always the list.
  *
- * It resolves the last visited route from navigation state, fetches the matching policy/domain
- * from Onyx (to verify it's still accessible), and returns a callback that performs the navigation.
+ * Resolves nav state and route IDs at click time inside the returned callback so the hook
+ * has no reactive subscriptions to nav state — unrelated navigations (e.g. opening a report)
+ * don't trigger re-renders. The destination workspace/domain page handles invalid IDs.
  */
 function useRestoreWorkspacesTabOnNavigate() {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const {login: currentUserLogin} = useCurrentUserPersonalDetails();
 
-    // Find the last route the user had open in the Workspaces tab (workspace, domain, or list).
-    // Priority: live nav state (root level) -> inside TabNavigator -> preserved state -> session storage.
-    const routeState = useRootNavigationState((rootState) => {
+    return () => {
+        const rootState = navigationRef.isReady() ? navigationRef.getRootState() : undefined;
         const topmostFullScreenRoute = rootState?.routes?.findLast((route) => isFullScreenName(route.name));
-        if (!topmostFullScreenRoute) {
-            return {};
-        }
-
-        // Multiple TAB_NAVIGATOR instances can coexist in the root stack — when navigation from
-        // inside an RHP targets a tab, linkTo PUSHes a fresh TabNavigator above the modal, and that
-        // new instance's WORKSPACE_NAVIGATOR slot starts empty. Older instances kept alive by
-        // ensureTabNavigatorRoutes still hold the previous workspace state, so flatten every
-        // workspace route from every TabNavigator in stack order and take the most recent one.
-        const lastWorkspaceRoute = (rootState?.routes ?? [])
-            .filter((route) => route.name === NAVIGATORS.TAB_NAVIGATOR)
-            .flatMap((tabNavigatorRoute) => {
-                const workspaceNavigatorRoute = getTabState(tabNavigatorRoute)?.routes?.find((route) => route.name === NAVIGATORS.WORKSPACE_NAVIGATOR);
-                const workspaceNavigatorState = workspaceNavigatorRoute?.state ?? (workspaceNavigatorRoute?.key ? getPreservedNavigatorState(workspaceNavigatorRoute.key) : undefined);
-                return workspaceNavigatorState?.routes?.filter((route) => isWorkspaceNavigatorRouteName(route.name)) ?? [];
-            })
-            .at(-1);
-
-        if (lastWorkspaceRoute) {
-            const tabState = lastWorkspaceRoute.state ?? (lastWorkspaceRoute.key ? getPreservedNavigatorState(lastWorkspaceRoute.key) : undefined);
-            return {lastWorkspacesTabNavigatorRoute: lastWorkspaceRoute, workspacesTabState: tabState, topmostFullScreenRoute};
-        }
-
-        // Fall back to session storage when no workspace route exists anywhere in the navigation tree.
-        const sessionRoute = getWorkspacesTabStateFromSessionStorage()
-            ?.routes?.findLast((route) => route.name === NAVIGATORS.WORKSPACE_NAVIGATOR)
-            ?.state?.routes?.findLast((route) => isWorkspaceNavigatorRouteName(route.name));
-        if (sessionRoute) {
-            return {lastWorkspacesTabNavigatorRoute: sessionRoute, workspacesTabState: sessionRoute.state, topmostFullScreenRoute};
-        }
-
-        return {topmostFullScreenRoute};
-    });
-
-    const {lastWorkspacesTabNavigatorRoute, workspacesTabState, topmostFullScreenRoute} = routeState;
-
-    // If the last route was a specific workspace or domain, extract its ID from params
-    const params = workspacesTabState?.routes?.at(0)?.params as
-        | WorkspaceSplitNavigatorParamList[typeof SCREENS.WORKSPACE.INITIAL]
-        | DomainSplitNavigatorParamList[typeof SCREENS.DOMAIN.INITIAL];
-    const paramsPolicyID = params && 'policyID' in params ? params.policyID : undefined;
-    const paramsDomainAccountID = params && 'domainAccountID' in params ? params.domainAccountID : undefined;
-
-    // Fetch the policy/domain to verify it's still accessible (not deleted/hidden) before restoring
-    const lastViewedPolicySelector = useCallback(
-        (policies: OnyxCollection<Policy>) => {
-            if (lastWorkspacesTabNavigatorRoute?.name !== NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR || !paramsPolicyID) {
-                return undefined;
-            }
-            return policies?.[`${ONYXKEYS.COLLECTION.POLICY}${paramsPolicyID}`];
-        },
-        [lastWorkspacesTabNavigatorRoute?.name, paramsPolicyID],
-    );
-    const [lastViewedPolicy] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: lastViewedPolicySelector});
+        const lastWorkspacesTabNavigatorRoute = findLastWorkspaceRoute(rootState);
+        const workspacesTabState = getWorkspacesTabState(lastWorkspacesTabNavigatorRoute);
 
-    const lastViewedDomainSelector = useCallback(
-        (domains: OnyxCollection<Domain>) => {
-            if (lastWorkspacesTabNavigatorRoute?.name !== NAVIGATORS.DOMAIN_SPLIT_NAVIGATOR || !paramsDomainAccountID) {
-                return undefined;
-            }
-            return domains?.[`${ONYXKEYS.COLLECTION.DOMAIN}${paramsDomainAccountID}`];
-        },
-        [lastWorkspacesTabNavigatorRoute?.name, paramsDomainAccountID],
-    );
-    const [lastViewedDomain] = useOnyx(ONYXKEYS.COLLECTION.DOMAIN, {selector: lastViewedDomainSelector});
+        const params = workspacesTabState?.routes?.at(0)?.params as WorkspaceParams | undefined;
+        const policyID = params && 'policyID' in params ? params.policyID : undefined;
+        const domainAccountID = params && 'domainAccountID' in params ? params.domainAccountID : undefined;
 
-    return useCallback(() => {
         navigateToWorkspacesPage({
             shouldUseNarrowLayout,
-            currentUserLogin,
-            policy: lastViewedPolicy,
-            domain: lastViewedDomain,
+            policyID,
+            domainAccountID,
             lastWorkspacesTabNavigatorRoute,
             topmostFullScreenRoute,
             workspacesTabState,
         });
-    }, [shouldUseNarrowLayout, currentUserLogin, lastViewedPolicy, lastViewedDomain, lastWorkspacesTabNavigatorRoute, topmostFullScreenRoute, workspacesTabState]);
+    };
 }
 
 export default useRestoreWorkspacesTabOnNavigate;
diff --git a/src/libs/Navigation/helpers/navigateToWorkspacesPage.ts b/src/libs/Navigation/helpers/navigateToWorkspacesPage.ts
@@ -4,12 +4,10 @@ import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import {getPreservedNavigatorState} from '@libs/Navigation/AppNavigator/createSplitNavigator/usePreserveNavigatorState';
 import Navigation from '@libs/Navigation/Navigation';
 import navigationRef from '@libs/Navigation/navigationRef';
-import {isPendingDeletePolicy, shouldShowPolicy as shouldShowPolicyUtil} from '@libs/PolicyUtils';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
-import type {Domain, Policy} from '@src/types/onyx';
 import getActiveTabName from './getActiveTabName';
 import getPathFromState from './getPathFromState';
 import {getTabState} from './tabNavigatorUtils';
@@ -26,10 +24,9 @@ function wrapStateInNavigators(state: PartialState<NavigationState>, navigators:
 }
 
 type Params = {
-    currentUserLogin?: string;
     shouldUseNarrowLayout: boolean;
-    policy?: Policy;
-    domain?: Domain;
+    policyID?: string;
+    domainAccountID?: number;
     lastWorkspacesTabNavigatorRoute?: RouteType;
     topmostFullScreenRoute?: RouteType;
     /**
@@ -43,7 +40,7 @@ type Params = {
     workspacesTabState?: NavigationState | PartialState<NavigationState>;
 };
 
-const navigateToWorkspacesPage = ({currentUserLogin, shouldUseNarrowLayout, policy, domain, lastWorkspacesTabNavigatorRoute, topmostFullScreenRoute, workspacesTabState}: Params) => {
+const navigateToWorkspacesPage = ({shouldUseNarrowLayout, policyID, domainAccountID, lastWorkspacesTabNavigatorRoute, topmostFullScreenRoute, workspacesTabState}: Params) => {
     const rootState = navigationRef.getRootState();
     const focusedRoute = rootState ? findFocusedRoute(rootState) : undefined;
     const isOnWorkspacesList = focusedRoute?.name === SCREENS.WORKSPACES_LIST;
@@ -93,45 +90,40 @@ const navigateToWorkspacesPage = ({currentUserLogin, shouldUseNarrowLayout, poli
             return;
         }
 
-        // Workspace route found: try to restore last workspace screen.
+        // Workspace route found: navigate to last workspace screen by ID.
+        // Validation is deferred to the destination — if the policy was deleted or access
+        // revoked, the workspace page will redirect to the list itself.
         if (lastWorkspacesTabNavigatorRoute.name === NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR) {
-            const shouldShowPolicy = shouldShowPolicyUtil(policy, false, currentUserLogin);
-            const isPendingDelete = isPendingDeletePolicy(policy);
-
-            // Workspace is not accessible or is being deleted: go to list.
-            if (!shouldShowPolicy || isPendingDelete) {
+            if (!policyID) {
                 Navigation.navigate(ROUTES.WORKSPACES_LIST.route);
                 return;
             }
-
-            if (policy?.id) {
-                // Synthesize a URL from the captured WorkspaceSplitNavigator inner state and navigate
-                // to it. URL-based navigation goes through `getStateFromPath`, which produces a fully
-                // formed nested state and reliably handles pushing a fresh TabNavigator on top of an
-                // existing fullscreen stack. The state has to be wrapped with its full ancestor chain
-                // (TAB_NAVIGATOR > WORKSPACE_NAVIGATOR > WORKSPACE_SPLIT_NAVIGATOR) so `getPathFromState`
-                // can match the linking-config hierarchy and produce a real URL like
-                // `/workspaces/POLICY_ID/workflows`; otherwise the resolver falls back to navigator
-                // names as path segments and the result hits 404. Narrow layouts skip the deep-restore
-                // and go to the workspace's initial page (mirrors mobile behavior).
-                const wrappedState =
-                    !shouldUseNarrowLayout && workspacesTabState
-                        ? wrapStateInNavigators(workspacesTabState as PartialState<NavigationState>, [
-                              NAVIGATORS.TAB_NAVIGATOR,
-                              NAVIGATORS.WORKSPACE_NAVIGATOR,
-                              NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR,
-                          ])
-                        : undefined;
-                const targetPath = (wrappedState ? getPathFromState(wrappedState) : ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)) as Route;
-                Navigation.navigate(targetPath);
-            }
+            // Synthesize a URL from the captured WorkspaceSplitNavigator inner state and navigate
+            // to it. URL-based navigation goes through `getStateFromPath`, which produces a fully
+            // formed nested state and reliably handles pushing a fresh TabNavigator on top of an
+            // existing fullscreen stack. The state has to be wrapped with its full ancestor chain
+            // (TAB_NAVIGATOR > WORKSPACE_NAVIGATOR > WORKSPACE_SPLIT_NAVIGATOR) so `getPathFromState`
+            // can match the linking-config hierarchy and produce a real URL like
+            // `/workspaces/POLICY_ID/workflows`; otherwise the resolver falls back to navigator
+            // names as path segments and the result hits 404. Narrow layouts skip the deep-restore
+            // and go to the workspace's initial page (mirrors mobile behavior).
+            const wrappedState =
+                !shouldUseNarrowLayout && workspacesTabState
+                    ? wrapStateInNavigators(workspacesTabState as PartialState<NavigationState>, [
+                          NAVIGATORS.TAB_NAVIGATOR,
+                          NAVIGATORS.WORKSPACE_NAVIGATOR,
+                          NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR,
+                      ])
+                    : undefined;
+            const targetPath = (wrappedState ? getPathFromState(wrappedState) : ROUTES.WORKSPACE_INITIAL.getRoute(policyID)) as Route;
+            Navigation.navigate(targetPath);
             return;
         }
 
-        // Domain route found: try to restore last domain screen.
+        // Domain route found: navigate to last domain screen by ID.
         if (lastWorkspacesTabNavigatorRoute.name === NAVIGATORS.DOMAIN_SPLIT_NAVIGATOR) {
-            if (domain?.accountID !== undefined) {
-                Navigation.navigate(ROUTES.DOMAIN_INITIAL.getRoute(domain.accountID));
+            if (domainAccountID !== undefined) {
+                Navigation.navigate(ROUTES.DOMAIN_INITIAL.getRoute(domainAccountID));
                 return;
             }
         }
diff --git a/tests/unit/navigateToWorkspacesPageTest.ts b/tests/unit/navigateToWorkspacesPageTest.ts
