componentsByName added

Author: sgaczol

apps/src/shared/gamma/containers/stack/StackContainer.tsx

@@ -25,6 +25,14 @@ import { useParentNavigationEffect } from './hooks/useParentNavigationEffect';
 export function StackContainer({ routeConfigs }: StackContainerProps) {
   useSanitizeRouteConfigs(routeConfigs);
 
+  const componentsByName = React.useMemo(() => {
+    const map = new Map<string, StackRouteConfig['Component']>();
+    for (const config of routeConfigs) {
+      map.set(config.name, config.Component);
+    }
+    return map;
+  }, [routeConfigs]);
+
   const [stackNavState, navActionDispatch]: [
     StackNavigationState,
     React.Dispatch<NavigationAction>,
@@ -78,17 +86,13 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
             setRouteOptions: navMethods.setRouteOptions,
           };
 
-          const matchingConfig = routeConfigs.find(
-            config => config.name === name,
-          );
-          if (!matchingConfig) {
+          const Component = componentsByName.get(name);
+          if (!Component) {
             throw new Error(
               `[Stack] No config matches the "${name}" route name`,
             );
           }
 
-          const Component = matchingConfig.Component;
-
           return (
             <Stack.Screen
               key={routeKey}

apps/src/shared/gamma/containers/tabs/TabsContainer.tsx

@@ -29,6 +29,14 @@ export function TabsContainer(props: TabsContainerProps) {
 
   useSanitizeRouteConfigs(routeConfigs);
 
+  const componentsByName = React.useMemo(() => {
+    const map = new Map<string, TabRouteConfig['Component']>();
+    for (const config of routeConfigs) {
+      map.set(config.name, config.Component);
+    }
+    return map;
+  }, [routeConfigs]);
+
   const [tabsNavState, dispatch]: [
     TabsContainerState,
     React.Dispatch<TabsNavigationAction>,
@@ -79,17 +87,13 @@ export function TabsContainer(props: TabsContainerProps) {
         const pendingForUpdate =
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
-        const matchingConfig = routeConfigs.find(
-          config => config.name === route.name,
-        );
-        if (!matchingConfig) {
+        const Component = componentsByName.get(route.name);
+        if (!Component) {
           throw new Error(
             `[Tabs] No config matches the "${route.name}" route name`,
           );
         }
 
-        const Component = matchingConfig.Component;
-
         return (
           <TabsContainerItem
             key={route.routeKey}